@props(['label'=>'Document file', 'required'=>true, 'name'=>'file'])
@php($inputId='secure-file-'.\Illuminate\Support\Str::uuid())
@php($maximumBytes=app(\App\Domain\Documents\FileValidator::class)->maxBytes())
<div class="secure-document-input" data-secure-upload data-max-bytes="{{ $maximumBytes }}">
    <label for="{{ $inputId }}">{{ $label }}</label>
    <div class="capture-file-pick"><input id="{{ $inputId }}" type="file" name="{{ $name }}" aria-label="{{ $label }}" accept="application/pdf,image/jpeg,image/png,.pdf,.jpg,.jpeg,.png" @required($required) data-upload-file aria-describedby="{{ $inputId }}-help"><label class="button secondary" for="{{ $inputId }}"><x-icon name="file"/>Choose file</label></div>
    <div class="capture-actions"><button type="button" class="button secondary" data-upload-camera-button hidden><x-icon name="camera"/>Take photo</button><button type="button" class="text-button" data-upload-clear hidden>Remove selected file</button></div>
    <input type="file" accept="image/jpeg,image/png" capture="environment" data-upload-camera hidden aria-label="Photograph document">
    <p id="{{ $inputId }}-help" class="hint">PDF, JPEG or PNG, up to {{ round($maximumBytes/1048576,2) }} MB per file. On supported phones, Take photo opens the camera. Otherwise, choose an existing image.</p>
    <p class="hint" data-upload-selection role="status" aria-live="polite">No file selected.</p>
    <img class="capture-preview" data-upload-preview hidden alt="Selected document photo preview">
</div>