<div class="card mb-4 shadow-sm">
    <div class="card-body">

        {{-- HEADER --}}
        <h4 class="fw-bold mb-3 d-flex justify-content-between align-items-center">
            Bank Details

            @if ($isUnlocked)
                <button
                        class="btn btn-primary btn-sm"
                        wire:click="lockDetails"
                >
                    <i class="mdi mdi-lock"></i>
                </button>
            @endif
        </h4>

        {{-- EMPTY / LOCKED STATE --}}
        @if (!$isUnlocked)
            <div class="text-center p-5 text-muted">
                <i class="mdi mdi-shield" style="font-size: 48px;"></i>

                @if (!$claim->bankDetail)
                    <p class="mt-3 fw-bold">
                        No bank details have been added for this client
                    </p>
                @else
                    <p class="mt-3 fw-bold">
                        Bank details are currently locked
                    </p>
                @endif

                <div class="mx-auto mt-4" style="max-width: 350px;">
                    <form wire:submit.prevent="verifyPassword">
                        <div class="input-group">
                            <input type="password"
                                   wire:model.defer="verificationPassword"
                                   class="form-control @error('verificationPassword') is-invalid @enderror"
                                   placeholder="Enter password to unlock">
                            <button class="btn btn-primary" type="submit">
                                Verify
                            </button>
                        </div>
                        @error('verificationPassword') <div class="text-danger small mt-2 text-start">{{ $message }}</div> @enderror
                    </form>
                </div>
            </div>
        @else

            {{-- FORM CONTENT --}}
            <div class="row g-3">

                {{-- Name on Account --}}
                <div class="col-md-12">
                    <x-ui.input
                            label="Name on Account"
                            name="name_on_account"
                            wire:model.defer="name_on_account"
                            placeholder="Name on Account"
                    />
                </div>

                {{-- Sort Code --}}
                <div class="col-md-6">
                    <x-ui.input
                            label="Sort Code"
                            name="sort_code"
                            wire:model.defer="sort_code"
                            placeholder="Sort Code"
                    />
                </div>

                {{-- Account Number --}}
                <div class="col-md-6">
                    <x-ui.input
                            label="Account Number"
                            name="account_number"
                            wire:model.defer="account_number"
                            placeholder="Account Number"
                    />
                </div>

                {{-- Reference Number --}}
                <div class="col-md-6">
                    <x-ui.input
                            label="Building Society or credit union reference number"
                            name="reference_number"
                            wire:model.defer="reference_number"
                            placeholder="Reference number"
                    />
                </div>

                {{-- BIC/SWIFT --}}
                <div class="col-md-6">
                    <x-ui.input
                            label="Bank Identifier Code (BIC) or SWIFT code"
                            name="bic_swift"
                            wire:model.defer="bic_swift"
                            placeholder="BIC or SWIFT code"
                    />
                </div>

                {{-- Clearing Code --}}
                <div class="col-md-6">
                    <x-ui.input
                            label="Clearing Code"
                            name="clearing_code"
                            wire:model.defer="clearing_code"
                            placeholder="Clearing Code"
                    />
                </div>

                {{-- IBAN --}}
                <div class="col-md-6">
                    <x-ui.input
                            label="International Bank Account Number (IBAN)"
                            name="iban"
                            wire:model.defer="iban"
                            placeholder="IBAN"
                    />
                </div>
            </div>

        @endif
    </div>

    {{-- FOOTER --}}
    @if ($isUnlocked)
        <div class="card-footer text-end bg-light">
            <button
                    wire:click="saveBankDetails"
                    class="btn btn-success"
            >
                Save
            </button>
        </div>
    @endif
</div>