<div class="patcher-container" x-data="HashesChecker($wire)"
     x-ref="hashRoot" @refresh.window="refreshIcons($el)">
    <div class="form-group">
        <label class="form-label">ROM</label>
            <div class="form-upload">
                <input type="file" id="rom-field" @change="handleSubmitFile($event)" :disabled="isCalculating">
                <div class="form-upload-placeholder level">
                    <i data-lucide="file-archive" size="36" style="margin-bottom:15px;color:var(--text2)"></i>
                    <div style="font-size: 1.1rem;color:var(--text);margin-bottom:5px;">
                        <span x-text="isCalculating ? 'Please wait' :  'Click or drag\'n drop files here.'"></span>
                    </div>
                </div>
            </div>
    </div>
    @if($hash)
        <div>
            <x-form-field-title name="Hash" />
            <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>
                <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()">
                        Remove
                    </button>
                </div>
            </div>
            <x-form-field-title name="Related entries" />
            <div class="form-group">
                <div class="grid-entries">
                    @forelse( $entries as $entry )
                        <x-entry-card :entry="$entry" />
                    @empty
                        No entries related.
                    @endforelse
                </div>
            </div>
        </div>
    @endif
</div>
