@extends('layouts.app')

@section('title', 'Upload recording')

@section('content')
    <div class="mb-8">
        <h1 class="text-2xl font-semibold tracking-tight">Upload recording</h1>
        <p class="mt-1 text-sm text-stone-600">Upload audio from your pocket recorder. Embedded metadata is extracted when available.</p>
    </div>

    <form
        method="POST"
        action="{{ route('recordings.store') }}"
        enctype="multipart/form-data"
        class="max-w-xl space-y-6 rounded border border-stone-200 bg-white p-6 shadow-sm"
    >
        @csrf

        <div>
            <label for="audio" class="block text-sm font-medium text-stone-700">Audio file</label>
            <input
                id="audio"
                type="file"
                name="audio"
                accept=".mp3,.wav,.ogg,.oga,.flac,.m4a,.mp4,.aac,.webm,.wma,.aiff,.aif,audio/*"
                required
                class="mt-2 block w-full text-sm text-stone-600 file:mr-4 file:rounded file:border-0 file:bg-teal-50 file:px-3 file:py-2 file:text-sm file:font-medium file:text-teal-800 hover:file:bg-teal-100"
            >
            <p class="mt-2 text-xs text-stone-500">MP3, WAV, OGG, FLAC, M4A, AAC, WebM, WMA, or AIFF (max 100 MB).</p>
        </div>

        <div>
            <label for="title" class="block text-sm font-medium text-stone-700">Title (optional)</label>
            <input
                id="title"
                type="text"
                name="title"
                value="{{ old('title') }}"
                placeholder="Leave blank to use embedded title or filename"
                class="mt-2 w-full rounded border border-stone-300 px-3 py-2 text-sm shadow-sm focus:border-teal-600 focus:outline-none focus:ring-1 focus:ring-teal-600"
            >
        </div>

        <div class="flex items-center gap-3">
            <button type="submit" class="rounded bg-teal-700 px-4 py-2 text-sm font-medium text-white hover:bg-teal-800">
                Upload
            </button>
            <a href="{{ route('recordings.index') }}" class="text-sm text-stone-600 hover:underline">Cancel</a>
        </div>
    </form>
@endsection