{{-- Message vocal joint au rapport : enregistré dans le navigateur, glissé dans
     le champ `vocal` et envoyé avec le formulaire (qui doit être en
     multipart/form-data). La logique est dans js/interventions/vocal.js,
     chargé une seule fois même avec un modal par intervention. Masqué sur un
     navigateur qui ne sait pas enregistrer. --}}
<div class="mb-3" data-vocal
    data-libelle-enregistrer="{{ __('Enregistrer un vocal') }}"
    data-libelle-refaire="{{ __('Réenregistrer') }}"
    data-libelle-arreter="{{ __('Arrêter') }}"
    data-message-refus="{{ __('Micro refusé : autorisez-le dans le navigateur pour enregistrer un vocal.') }}">
    <label class="form-label d-block">{{ __('Message vocal') }}</label>

    <div class="d-flex flex-wrap align-items-center gap-2">
        <button type="button" class="btn btn-outline-secondary btn-sm" aria-pressed="false" data-vocal-bouton>
            <i class="bi bi-record-circle"></i> <span data-vocal-libelle>{{ __('Enregistrer un vocal') }}</span>
        </button>
        <span class="small text-danger fw-semibold" data-vocal-duree></span>
        <audio controls hidden data-vocal-lecture style="height: 36px; max-width: 100%;"></audio>
        <button type="button" class="btn btn-link btn-sm text-danger p-0" hidden data-vocal-supprimer>
            {{ __('Supprimer') }}
        </button>
    </div>

    <input type="file" name="vocal" accept="audio/*" hidden data-vocal-champ>

    <div class="form-text">
        {{ __('Facultatif — 5 minutes maximum, réécoutable depuis la fiche. Gestan ne reçoit que le texte du rapport.') }}
    </div>
</div>

@pushOnce('scripts')
    <script src="@assetV('js/interventions/vocal.js')"></script>
@endPushOnce