<div x-data="HashesManager($wire)" x-ref="hashRoot">
    <x-form-field-title name="Hashes" required="true" />
    @if( count( $hashes ) > 0)
    <div class="form-group grid-hashes">

        <div class="hash-filename hash-first">
            <x-form-field-title name="Filename" />
        </div>

        <div class="hash-crc32 hash-first">
            <x-form-field-title name="CRC32" />
        </div>

        <div class="hash-sha1 hash-first">
            <x-form-field-title name="SHA-1" />
        </div>

        <div class="hash-verified hash-first">
            <x-form-field-title name="Verified" />
        </div>

        <div class="hash-remove hash-first">
            <x-form-field-title name="Actions" />
        </div>

        @foreach( $hashes as $i => $hash )
            <div class="hash-filename">
                <input class="form-input" type="text" autocomplete="off" value="{{ $hash['filename'] }}" disabled>
            </div>
            <div class="hash-crc32">
                <input class="form-input" type="text" autocomplete="off" value="{{ $hash['hash_crc32'] }}" disabled>
            </div>
            <div class="hash-sha1">
                <input class="form-input" type="text" autocomplete="off" value="{{ $hash['hash_sha1'] }}" disabled>
            </div>
            <div class="hash-verified">
                <input class="form-input" type="text" autocomplete="off" value="{{ $hash['verified'] }}" disabled>
            </div>
            <div class="hash-remove">
                <button type="button" class="btn" wire:click="removeHash({{ $i }})">
                    Remove
                </button>
            </div>

            <input type="hidden" name="hashes[{{ $i }}][filename]" value="{{ $hash['filename'] }}">
            <input type="hidden" name="hashes[{{ $i }}][hash_crc32]" value="{{ $hash['hash_crc32'] }}">
            <input type="hidden" name="hashes[{{ $i }}][hash_sha1]" value="{{ $hash['hash_sha1'] }}">
            <input type="hidden" name="hashes[{{ $i }}][verified]" value="{{ $hash['verified'] }}">
        @endforeach

    </div>
@endif

<div style="display:flex;align-items: flex-end;justify-content: right;gap:15px;">
    <span x-show="isCalculating" x-cloak>
        <i data-lucide="loader-2" class="spin"></i>
        Please wait...
    </span>

    <span x-show="error" x-text="error" class="form-error-text" x-cloak></span>

    <button type="button" class="btn primary" :disabled="isCalculating" @click="handleSubmitFile()">Add Hashes</button>
</div>

</div>
