@php
    $degreeLabels = ['BACH' => 'Bach.', 'LIC' => 'Lic.', 'ING' => 'Ing.', 'MG' => 'Mg.', 'DR' => 'Dr.'];
@endphp

<div>
    <x-ui.summary-cards
        :total="$summary['total']"
        :active="$summary['active']"
        :inactive="$summary['inactive']"
    />

    <div class="catalog-panel overflow-hidden">
        <div class="catalog-head">
            <div>
                <h2>{{ $label }}</h2>
            </div>
            <div class="catalog-head-actions">
                <x-ui.button variant="primary" type="button" icon="plus" wire:click="openCreate">Agregar</x-ui.button>
            </div>
        </div>

        <div class="catalog-query">
            <div class="catalog-field catalog-field-grow">
                <label for="search">Buscar</label>
                <input
                    id="search"
                    type="search"
                    class="catalog-input"
                    placeholder="Buscar…"
                    wire:model="searchDraft"
                    wire:keydown.enter.prevent="applySearch"
                >
            </div>
            <div class="catalog-field">
                <label for="statusFilter">Estado</label>
                <select id="statusFilter" class="catalog-select min-w-[10rem]" wire:model.live="statusFilter">
                    <option value="">TODOS</option>
                    <option value="1">ACTIVO</option>
                    <option value="0">INACTIVO</option>
                </select>
            </div>
            @if ($type === 'teachers')
                <div class="catalog-field">
                    <label for="academicDegreeFilter">Grado académico</label>
                    <select id="academicDegreeFilter" class="catalog-select min-w-[10rem]" wire:model.live="academicDegreeFilter">
                        <option value="">TODOS</option>
                        @foreach ($degreeLabels as $value => $degreeLabel)
                            <option value="{{ $value }}">{{ $degreeLabel }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="catalog-field">
                    <label for="academicDepartmentFilter">Departamento</label>
                    <select id="academicDepartmentFilter" class="catalog-select min-w-[10rem]" wire:model.live="academicDepartmentFilter">
                        <option value="">TODOS</option>
                        @foreach ($departments as $department)
                            <option value="{{ $department->value }}">{{ $department->label() }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="catalog-field">
                    <label for="teacherTypeFilter">Tipo</label>
                    <select id="teacherTypeFilter" class="catalog-select min-w-[10rem]" wire:model.live="teacherTypeFilter">
                        <option value="">TODOS</option>
                        @foreach ($teacherTypes as $teacherTypeOption)
                            <option value="{{ $teacherTypeOption->value }}">{{ mb_strtoupper($teacherTypeOption->label(), 'UTF-8') }}</option>
                        @endforeach
                    </select>
                </div>
            @endif
            <div class="catalog-query-actions">
                <x-ui.icon-button variant="search" wire:click="applySearch" aria-label="Buscar" />
                <x-ui.icon-button variant="clear" wire:click="clearFilters" aria-label="Limpiar" />
            </div>
        </div>

        <div class="catalog-table-wrap">
            <table class="catalog-table">
                <thead>
                    <tr>
                        <th class="col-num">
                            <x-ui.sort-header column="id" label="N°" :sort="$sort" :direction="$direction" />
                        </th>
                        <th>Foto</th>
                        <th>
                            <x-ui.sort-header column="document_number" label="Documento" :sort="$sort" :direction="$direction" />
                        </th>
                        <th>
                            <x-ui.sort-header column="paternal_surname" label="Nombre" :sort="$sort" :direction="$direction" />
                        </th>
                        @if ($type === 'administrators')
                            <th>
                                <x-ui.sort-header column="email" label="Correo" :sort="$sort" :direction="$direction" />
                            </th>
                        @else
                            <th>
                                <x-ui.sort-header column="academic_degree" label="Grado" :sort="$sort" :direction="$direction" />
                            </th>
                            <th>
                                <x-ui.sort-header column="academic_department" label="Departamento" :sort="$sort" :direction="$direction" />
                            </th>
                            <th>
                                <x-ui.sort-header column="teacher_type" label="Tipo" :sort="$sort" :direction="$direction" />
                            </th>
                        @endif
                        <th>
                            <x-ui.sort-header column="active" label="Estado" :sort="$sort" :direction="$direction" />
                        </th>
                        <th class="col-actions">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($records as $record)
                        <tr wire:key="user-{{ $type }}-{{ $record->id }}">
                            <td class="col-num">{{ $record->id }}</td>
                            <td>
                                @if ($record->reference_photo_path)
                                    <a
                                        href="{{ route('admin.files.reference-photo', $record) }}"
                                        target="_blank"
                                        rel="noopener"
                                        class="table-avatar"
                                        title="Ver foto de {{ $record->displayName() }} en otra pestaña"
                                    >
                                        <img src="{{ route('admin.files.reference-photo', $record) }}" alt="Foto de {{ $record->displayName() }}">
                                    </a>
                                @else
                                    <span class="table-avatar">
                                        <x-icon name="users" class="h-4 w-4" />
                                    </span>
                                @endif
                            </td>
                            <td class="col-muted">{{ $record->document_type->value }} {{ $record->document_number }}</td>
                            <td class="col-primary">{{ $record->displayName() }}</td>
                            @if ($type === 'administrators')
                                <td>{{ $record->email }}</td>
                            @else
                                <td>
                                    @if ($record->academic_degree)
                                        <x-ui.badge tone="info">{{ $degreeLabels[$record->academic_degree->value] }}</x-ui.badge>
                                    @else
                                        <span class="col-muted">—</span>
                                    @endif
                                </td>
                                <td>
                                    @if ($record->academic_department)
                                        <x-ui.badge tone="{{ $record->academic_department->tone() }}">{{ $record->academic_department->label() }}</x-ui.badge>
                                    @else
                                        <span class="col-muted">—</span>
                                    @endif
                                </td>
                                <td>
                                    @if ($record->teacher_type)
                                        {{ $record->teacher_type->label() }}
                                    @else
                                        <span class="col-muted">—</span>
                                    @endif
                                </td>
                            @endif
                            <td>
                                @if ($record->active)
                                    <x-ui.badge tone="success">ACTIVO</x-ui.badge>
                                @else
                                    <x-ui.badge tone="danger">INACTIVO</x-ui.badge>
                                @endif
                            </td>
                            <td class="col-actions">
                                <div class="catalog-actions">
                                    @if ($type === 'administrators')
                                        <x-ui.icon-button
                                            variant="reset-password"
                                            wire:click="askResetPassword({{ $record->id }})"
                                            aria-label="Restablecer contraseña de {{ $record->displayName() }}"
                                        />
                                    @else
                                        <x-ui.icon-button
                                            variant="fingerprint"
                                            type="button"
                                            x-data
                                            x-on:click="$dispatch('open-fingerprint-manage', { id: {{ $record->id }}, name: {{ \Illuminate\Support\Js::from($record->displayName()) }}, document: {{ \Illuminate\Support\Js::from($record->document_number) }}, registered: {{ \Illuminate\Support\Js::from((bool) $record->fingerprint) }} })"
                                            aria-label="Gestionar huella de {{ $record->displayName() }}"
                                            title="Huella: {{ $record->fingerprint ? 'registrada' : 'sin registrar' }}"
                                        />
                                    @endif
                                    <x-ui.icon-button variant="edit" wire:click="edit({{ $record->id }})" aria-label="Editar {{ $record->displayName() }}" />
                                    <x-ui.icon-button
                                        variant="danger"
                                        wire:click="askDelete({{ $record->id }})"
                                        aria-label="Eliminar {{ $record->displayName() }}"
                                    />
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="{{ $type === 'teachers' ? 9 : 7 }}" class="catalog-empty">
                                <p>Todavía no hay registros.</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <x-ui.pagination :paginator="$records" />
    </div>

    <x-ui.modal
        :open="$modalOpen"
        :title="$editingId ? 'Editar '.$singular : 'Agregar '.$singular"
        wide
    >
        <form wire:submit="save" class="flex flex-col gap-4" enctype="multipart/form-data" autocomplete="off">
            <div class="grid gap-4 sm:grid-cols-2">
                <x-ui.field label="Tipo de documento" name="documentType" :required="true" :error="$errors->first('documentType')">
                    <select id="documentType" wire:model="documentType" class="form-input" autocomplete="off" required>
                        <option value="DNI">DNI</option>
                        <option value="CE">Carné de extranjería</option>
                        <option value="PASSPORT">Pasaporte</option>
                    </select>
                </x-ui.field>
                <x-ui.field label="Número de documento" name="documentNumber" :required="true" :error="$errors->first('documentNumber')">
                    <input id="documentNumber" type="text" wire:model="documentNumber" class="form-input uppercase" autocomplete="off" required>
                </x-ui.field>
                <x-ui.field label="Nombres" name="names" :required="true" :error="$errors->first('names')">
                    <input id="names" type="text" wire:model="names" class="form-input uppercase" autocomplete="off" required>
                </x-ui.field>
                <x-ui.field label="Apellido paterno" name="paternalSurname" :required="true" :error="$errors->first('paternalSurname')">
                    <input id="paternalSurname" type="text" wire:model="paternalSurname" class="form-input uppercase" autocomplete="off" required>
                </x-ui.field>
                <x-ui.field label="Apellido materno" name="maternalSurname" :required="true" :error="$errors->first('maternalSurname')">
                    <input id="maternalSurname" type="text" wire:model="maternalSurname" class="form-input uppercase" autocomplete="off" required>
                </x-ui.field>
                <x-ui.field label="Sexo" name="sex" :required="true" :error="$errors->first('sex')">
                    <select id="sex" wire:model="sex" class="form-input" autocomplete="off" required>
                        <option value="M">Masculino</option>
                        <option value="F">Femenino</option>
                    </select>
                </x-ui.field>
                <x-ui.field label="Fecha de nacimiento" name="birthDate" :required="true" :error="$errors->first('birthDate')">
                    <input id="birthDate" type="date" wire:model="birthDate" class="form-input" autocomplete="off" required>
                </x-ui.field>
                @if ($type === 'teachers')
                    <x-ui.field label="Grado académico" name="academicDegree" :error="$errors->first('academicDegree')">
                        <select id="academicDegree" wire:model="academicDegree" class="form-input" autocomplete="off">
                            <option value="">Sin especificar</option>
                            @foreach ($degreeLabels as $value => $degreeLabel)
                                <option value="{{ $value }}">{{ $degreeLabel }}</option>
                            @endforeach
                        </select>
                    </x-ui.field>
                    <x-ui.field label="Departamento académico" name="academicDepartment" :required="true" :error="$errors->first('academicDepartment')">
                        <select id="academicDepartment" wire:model="academicDepartment" class="form-input" autocomplete="off" required>
                            <option value="">Seleccione…</option>
                            @foreach ($departments as $department)
                                <option value="{{ $department->value }}">{{ $department->label() }}</option>
                            @endforeach
                        </select>
                    </x-ui.field>
                    <x-ui.field label="Tipo de docente" name="teacherType" :required="true" :error="$errors->first('teacherType')">
                        <select id="teacherType" wire:model="teacherType" class="form-input" autocomplete="off" required>
                            <option value="">Seleccione…</option>
                            @foreach ($teacherTypes as $teacherTypeOption)
                                <option value="{{ $teacherTypeOption->value }}">{{ $teacherTypeOption->label() }}</option>
                            @endforeach
                        </select>
                    </x-ui.field>
                @endif
                <x-ui.field label="Teléfono" name="phone" :error="$errors->first('phone')">
                    <input id="phone" type="text" wire:model="phone" class="form-input" autocomplete="off">
                </x-ui.field>
                <x-ui.field
                    label="Correo"
                    name="email"
                    :required="$type === 'administrators'"
                    :error="$errors->first('email')"
                >
                    <input
                        id="email"
                        type="email"
                        wire:model="email"
                        class="form-input"
                        autocomplete="off"
                        @required($type === 'administrators')
                    >
                </x-ui.field>
            </div>

            @if ($type === 'administrators')
                @if ($editingId)
                    <p class="text-sm text-mute">
                        La contraseña la define el propio administrador en su primer ingreso — usa el ícono
                        <x-icon name="key" class="inline h-3.5 w-3.5 align-text-bottom" /> en la tabla si necesita restablecerla.
                    </p>
                @else
                    <p class="text-sm text-mute">
                        La contraseña inicial será su número de documento; se le pedirá cambiarla al ingresar por primera vez.
                    </p>
                @endif
            @endif

            @php
                $photoRequired = $type === 'teachers';
                $photoHasExisting = $existingPhoto && ! $removeExistingPhoto && ! $referencePhoto;
            @endphp
            <div
                x-data="{ uploadError: false }"
                x-on:livewire-upload-start="uploadError = false"
                x-on:livewire-upload-error="uploadError = true"
            >
                <label class="form-label" for="referencePhoto">
                    Foto de referencia
                    @if ($photoRequired)
                        <span class="form-required" aria-hidden="true">*</span>
                    @endif
                    @if ($type === 'administrators')
                        <span class="text-faint font-normal normal-case">(opcional)</span>
                    @elseif ($photoHasExisting)
                        <span class="text-faint font-normal normal-case">(ya cargada)</span>
                    @endif
                </label>
                <div class="avatar-upload">
                    <button
                        type="button"
                        class="avatar-upload-preview"
                        @click="$refs.avatarInput.click()"
                        wire:loading.attr="disabled"
                        wire:target="referencePhoto"
                        aria-label="{{ ($referencePhoto || ($existingPhoto && ! $removeExistingPhoto)) ? 'Cambiar foto' : 'Subir foto' }}"
                    >
                        @if ($referencePhoto)
                            <img src="{{ $referencePhoto->temporaryUrl() }}" alt="Vista previa">
                        @elseif ($existingPhoto && ! $removeExistingPhoto)
                            <img src="{{ route('admin.files.reference-photo', $editingId) }}" alt="Foto actual">
                        @else
                            <x-icon name="users" class="h-7 w-7" />
                        @endif
                        <span class="avatar-upload-spinner" wire:loading.flex wire:target="referencePhoto"></span>
                    </button>

                    <div class="min-w-0">
                        <div class="flex flex-wrap gap-2">
                            <x-ui.button type="button" variant="secondary" size="sm" @click="$refs.avatarInput.click()">
                                {{ ($referencePhoto || ($existingPhoto && ! $removeExistingPhoto)) ? 'Cambiar foto' : 'Subir foto' }}
                            </x-ui.button>
                            @if ($type === 'administrators' && ($referencePhoto || ($existingPhoto && ! $removeExistingPhoto)))
                                <x-ui.button type="button" variant="ghost" size="sm" wire:click="clearReferencePhoto">Quitar</x-ui.button>
                            @endif
                        </div>
                        <p class="mt-1.5 text-xs text-mute">
                            JPG o PNG, máximo 2&nbsp;MB.
                            @if ($type === 'teachers')
                                Es la foto que se compara contra las capturas del kiosko.
                            @endif
                        </p>
                    </div>

                    <input
                        id="referencePhoto"
                        type="file"
                        wire:model="referencePhoto"
                        accept="image/*"
                        x-ref="avatarInput"
                        class="hidden"
                        autocomplete="off"
                    >
                </div>
                <p class="form-error" x-show="uploadError" x-cloak>
                    No se pudo subir el archivo — puede ser muy pesado o el servidor tardó en responder. Intenta con otra foto.
                </p>
                @error('referencePhoto')
                    <p class="form-error">{{ $message }}</p>
                @enderror
            </div>

            <x-ui.field label="Estado" name="active" :required="true" :error="$errors->first('active')">
                <x-ui.toggle
                    :checked="$active"
                    wire:click="toggleActiveField"
                    on-label="ACTIVO"
                    off-label="INACTIVO"
                />
            </x-ui.field>

            <div class="modal-actions">
                <x-ui.button variant="ghost" type="button" wire:click="cancel">Cancelar</x-ui.button>
                <x-ui.button variant="primary">{{ $editingId ? 'Guardar' : 'Agregar' }}</x-ui.button>
            </div>
        </form>
    </x-ui.modal>

    <x-ui.confirm-modal
        :open="$confirmationOpen"
        :title="$confirmationTitle"
        :message="$confirmationMessage"
        :confirm-label="$confirmationLabel"
        :confirm-variant="$confirmationVariant"
    />

    @if ($type === 'teachers')
        {{-- Modal de gestión de huella. Controlado por Alpine (cliente): registrar,
             verificar y quitar. Habla con el agente local en https://127.0.0.1 y solo
             toca Livewire para guardar/quitar la plantilla. --}}
        <div
            x-data="{
                open: false,
                teacherId: null,
                teacherName: '',
                documentNumber: '',
                registered: false,
                view: 'menu',        /* menu | register | verify | confirm-remove */
                phase: 'idle',       /* idle | running | done | error */
                captured: 0,
                verifyResult: '',    /* match | other | none */
                errorMsg: '',
                agentBase: `https://127.0.0.1:${@js(config('services.fingerprint_agent.port'))}`,

                openModal(d) {
                    this.teacherId = d.id;
                    this.teacherName = d.name;
                    this.documentNumber = String(d.document ?? '');
                    this.registered = !! d.registered;
                    this.view = 'menu';
                    this.phase = 'idle';
                    this.captured = 0;
                    this.verifyResult = '';
                    this.errorMsg = '';
                    this.open = true;
                },
                close() { this.open = false; },        /* siempre se puede cerrar */
                backToMenu() { this.view = 'menu'; this.phase = 'idle'; this.captured = 0; this.verifyResult = ''; this.errorMsg = ''; },

                async syncAgent() {
                    try { await fetch(`${this.agentBase}/sync`, { method: 'POST', headers: { Accept: 'application/json' } }); } catch (e) {}
                },

                /* --- Registrar --- */
                startRegister() {
                    this.view = 'register';
                    this.phase = 'running';
                    this.captured = 0;
                    this.errorMsg = '';
                    this.runRegister();
                },
                async runRegister() {
                    try {
                        await this.syncAgent();   /* dedup contra la lista mas reciente del servidor */
                        const res = await fetch(`${this.agentBase}/enroll/start`, { method: 'POST', headers: { Accept: 'application/json' } });
                        if (! res.ok && res.status !== 202) throw new Error('start');
                        while (this.open && this.view === 'register' && this.phase === 'running') {
                            await new Promise(r => setTimeout(r, 400));
                            let data;
                            try { data = await (await fetch(`${this.agentBase}/enroll/progress`, { headers: { Accept: 'application/json' } })).json(); }
                            catch (e) { continue; }
                            this.captured = data.captured || 0;
                            if (data.error) {
                                this.phase = 'error';
                                this.errorMsg = data.error === 'timeout' ? 'No se detectó el dedo a tiempo. Reintenta.' : ('Error del lector: ' + data.error);
                                return;
                            }
                            if (data.done && data.template) { await this.finishRegister(data.template, data.matched_document); return; }
                        }
                    } catch (e) {
                        this.phase = 'error';
                        this.errorMsg = 'No se pudo contactar el lector. ¿Está el agente encendido?';
                    }
                },
                async finishRegister(template, matchedDocument) {
                    // Dedup: si el dedo ya pertenece a OTRO docente, no se guarda.
                    if (matchedDocument && String(matchedDocument) !== this.documentNumber) {
                        this.phase = 'error';
                        this.errorMsg = 'Esta huella ya está registrada para otro docente (documento ' + matchedDocument + '). No se guardó.';
                        return;
                    }
                    try {
                        await $wire.saveFingerprint(this.teacherId, template);
                        await this.syncAgent();
                        this.registered = true;
                        this.phase = 'done';
                    } catch (e) {
                        this.phase = 'error';
                        this.errorMsg = 'La huella se capturó pero no se pudo guardar.';
                    }
                },

                /* --- Verificar --- */
                async startVerify() {
                    this.view = 'verify';
                    this.phase = 'running';
                    this.verifyResult = '';
                    this.errorMsg = '';
                    try {
                        await this.syncAgent();   /* asegura la plantilla cargada en el lector */
                        const res = await fetch(`${this.agentBase}/identify`, { method: 'POST', headers: { Accept: 'application/json' } });
                        if (res.status === 408) { this.phase = 'error'; this.errorMsg = 'No se detectó el dedo a tiempo. Reintenta.'; return; }
                        if (res.status === 404) { this.phase = 'done'; this.verifyResult = 'none'; return; }
                        if (! res.ok) throw new Error('verify');
                        const data = await res.json();
                        this.phase = 'done';
                        this.verifyResult = (String(data.document_number) === this.documentNumber) ? 'match' : 'other';
                    } catch (e) {
                        this.phase = 'error';
                        this.errorMsg = 'No se pudo contactar el lector. ¿Está el agente encendido?';
                    }
                },

                /* --- Quitar --- */
                async doRemove() {
                    this.phase = 'running';
                    this.errorMsg = '';
                    try {
                        await $wire.removeFingerprint(this.teacherId);
                        await this.syncAgent();
                        this.registered = false;
                        this.backToMenu();
                    } catch (e) {
                        this.phase = 'error';
                        this.errorMsg = 'No se pudo quitar la huella.';
                    }
                },
            }"
            x-on:open-fingerprint-manage.window="openModal($event.detail)"
            x-show="open"
            x-cloak
            class="modal-scrim fixed inset-0 z-50 flex items-center justify-center p-3 sm:p-6"
        >
            <div class="modal-panel" style="max-width: 28rem; width: 100%;" role="dialog" aria-modal="true" x-on:click.outside="close()">
                <div class="flex items-start justify-between gap-3">
                    <div class="min-w-0">
                        <h2>Huella dactilar</h2>
                        <p class="mt-0.5 text-sm text-mute" x-text="teacherName"></p>
                    </div>
                    <button type="button" class="btn-ghost btn-icon shrink-0" x-on:click="close()" aria-label="Cerrar">
                        <x-icon name="close" />
                    </button>
                </div>

                <div class="mt-5 flex flex-col items-center gap-4 text-center">
                    <div class="kiosk-fingerprint"
                        x-bind:class="{ 'is-ok': (phase === 'done' && verifyResult !== 'other' && verifyResult !== 'none') , 'is-error': phase === 'error' || verifyResult === 'other' || verifyResult === 'none' }"
                        aria-hidden="true">
                        <x-icon name="fingerprint" class="relative h-12 w-12" />
                    </div>

                    {{-- MENÚ --}}
                    <template x-if="view === 'menu'">
                        <p class="text-sm text-mute">
                            Estado:
                            <strong x-text="registered ? 'huella registrada' : 'sin huella registrada'"></strong>.
                        </p>
                    </template>

                    {{-- REGISTRAR --}}
                    <template x-if="view === 'register' && phase === 'running'">
                        <div class="w-full">
                            <p class="text-sm" x-text="captured < 3 ? `Coloque el dedo en el lector (muestra ${captured + 1} de 3)` : 'Procesando…'"></p>
                            <p class="mt-1 text-xs text-mute" x-show="captured > 0 && captured < 3">Levante y vuelva a colocar el mismo dedo.</p>
                            <div class="mt-3 flex justify-center gap-3">
                                <template x-for="i in 3" :key="i">
                                    <span class="flex h-9 w-9 items-center justify-center rounded-full border text-sm font-semibold"
                                        x-bind:class="captured >= i ? 'border-transparent bg-emerald-600 text-white' : (captured + 1 === i ? 'border-orange-500 text-orange-600' : 'border-slate-300 text-slate-400')"
                                        x-text="captured >= i ? '✓' : i"></span>
                                </template>
                            </div>
                        </div>
                    </template>
                    <template x-if="view === 'register' && phase === 'done'">
                        <p class="text-sm font-medium" style="color: #059669;">✓ Huella registrada correctamente.</p>
                    </template>

                    {{-- VERIFICAR --}}
                    <template x-if="view === 'verify' && phase === 'running'">
                        <p class="text-sm">Coloque su huella en el lector para verificar…</p>
                    </template>
                    <template x-if="view === 'verify' && phase === 'done' && verifyResult === 'match'">
                        <p class="text-sm font-medium" style="color: #059669;">✓ Coincide: la huella corresponde a este docente.</p>
                    </template>
                    <template x-if="view === 'verify' && phase === 'done' && verifyResult === 'other'">
                        <p class="alert-block is-late text-sm">La huella leída pertenece a otra persona, no a este docente.</p>
                    </template>
                    <template x-if="view === 'verify' && phase === 'done' && verifyResult === 'none'">
                        <p class="alert-block is-late text-sm">No se reconoció la huella. Intente de nuevo o vuelva a registrarla.</p>
                    </template>

                    {{-- CONFIRMAR QUITAR --}}
                    <template x-if="view === 'confirm-remove'">
                        <p class="text-sm text-mute">¿Quitar la huella de este docente? Ya no podrá marcar con huella hasta registrarla otra vez.</p>
                    </template>

                    {{-- ERROR (cualquier vista) --}}
                    <template x-if="phase === 'error'">
                        <p class="alert-block is-late text-sm" x-text="errorMsg"></p>
                    </template>
                </div>

                <div class="modal-actions mt-6">
                    {{-- MENÚ: acciones según estado --}}
                    <template x-if="view === 'menu' && ! registered">
                        <button type="button" class="btn-primary" x-on:click="startRegister()">Registrar huella</button>
                    </template>
                    <template x-if="view === 'menu' && registered">
                        <button type="button" class="btn-primary" x-on:click="startVerify()">Verificar huella</button>
                    </template>
                    <template x-if="view === 'menu' && registered">
                        <button type="button" class="btn-danger" x-on:click="view = 'confirm-remove'; phase = 'idle'">Quitar huella</button>
                    </template>
                    <template x-if="view === 'menu'">
                        <button type="button" class="btn-ghost" x-on:click="close()">Cerrar</button>
                    </template>

                    {{-- REGISTRAR --}}
                    <template x-if="view === 'register' && phase === 'running'">
                        <button type="button" class="btn-primary" disabled>Capturando…</button>
                    </template>
                    <template x-if="view === 'register' && phase === 'error'">
                        <button type="button" class="btn-primary" x-on:click="startRegister()">Reintentar</button>
                    </template>
                    <template x-if="view === 'register' && phase === 'done'">
                        <button type="button" class="btn-primary" x-on:click="close()">Listo</button>
                    </template>
                    <template x-if="view === 'register' && phase !== 'done'">
                        <button type="button" class="btn-ghost" x-on:click="backToMenu()">Cancelar</button>
                    </template>

                    {{-- VERIFICAR --}}
                    <template x-if="view === 'verify' && phase === 'done'">
                        <button type="button" class="btn-primary" x-on:click="startVerify()">Verificar de nuevo</button>
                    </template>
                    <template x-if="view === 'verify' && phase === 'error'">
                        <button type="button" class="btn-primary" x-on:click="startVerify()">Reintentar</button>
                    </template>
                    <template x-if="view === 'verify' && phase !== 'running'">
                        <button type="button" class="btn-ghost" x-on:click="backToMenu()">Volver</button>
                    </template>
                    <template x-if="view === 'verify' && phase === 'running'">
                        <button type="button" class="btn-ghost" x-on:click="backToMenu()">Cancelar</button>
                    </template>

                    {{-- CONFIRMAR QUITAR --}}
                    <template x-if="view === 'confirm-remove'">
                        <button type="button" class="btn-danger" x-on:click="doRemove()" x-bind:disabled="phase === 'running'">Sí, quitar</button>
                    </template>
                    <template x-if="view === 'confirm-remove'">
                        <button type="button" class="btn-ghost" x-on:click="backToMenu()" x-bind:disabled="phase === 'running'">Cancelar</button>
                    </template>
                </div>
            </div>
        </div>
    @endif
</div>