@props(['id', 'title', 'formId', 'action', 'method' => 'POST'])

@php
    // After a failed save the page reloads, so the drawer reopens as it was: same record, same input.
    $isReopened = old('_drawer') === $id;
@endphp

<div id="{{ $id }}" class="offcanvas offcanvas-end sm-crud-drawer" tabindex="-1" aria-labelledby="{{ $id }}Label" data-saruar-crud-drawer data-create-title="{{ $title }}" data-create-action="{{ $action }}" @if ($isReopened) data-saruar-open-on-load @endif>
    <div class="offcanvas-header border-bottom">
        <h2 id="{{ $id }}Label" class="offcanvas-title h5" data-saruar-drawer-title>{{ $isReopened ? old('_drawer_title', $title) : $title }}</h2>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>

    <form id="{{ $formId }}" method="POST" action="{{ $isReopened ? old('_drawer_action', $action) : $action }}" class="d-flex flex-column flex-grow-1 sm-crud-form">
        @csrf
        <input type="hidden" name="_method" value="{{ $isReopened ? old('_method', $method) : $method }}" data-saruar-drawer-method>
        <input type="hidden" name="_drawer" value="{{ $id }}">
        <input type="hidden" name="_drawer_action" value="{{ $isReopened ? old('_drawer_action', $action) : $action }}" data-saruar-drawer-action>
        <input type="hidden" name="_drawer_title" value="{{ $isReopened ? old('_drawer_title', $title) : $title }}" data-saruar-drawer-title-input>

        <div class="offcanvas-body">{{ $slot }}</div>

        <div class="border-top p-3 d-flex justify-content-end gap-2 bg-white">
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="offcanvas">Cancel</button>
            <button type="submit" class="btn sm-btn-primary">Save Changes</button>
        </div>
    </form>
</div>