{{define "file-upload.html"}}
<div class="border-2 border-dashed border-terminal-border hover:border-terminal-accent transition-colors p-8 text-center cursor-pointer"
     id="{{.ID}}-dropzone"
     onclick="document.getElementById('{{.ID}}-input').click()">
    <svg class="w-10 h-10 mx-auto mb-3 text-terminal-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
    </svg>
    <p class="text-terminal-muted text-sm">{{if .Label}}{{.Label}}{{else}}Click to upload or drag and drop{{end}}</p>
    {{if .Hint}}<p class="text-terminal-muted text-xs mt-1">{{.Hint}}</p>{{end}}
    <input type="file"
           id="{{.ID}}-input"
           name="{{if .Name}}{{.Name}}{{else}}file{{end}}"
           class="hidden"
           {{if .Accept}}accept="{{.Accept}}"{{end}}
           {{if .Multiple}}multiple{{end}}>
</div>
{{end}}