@extends('layouts.admin')

@section('content')
<div class="max-w-3xl rounded-xl bg-white border border-outline-variant p-6 md:p-7">
    <h1 class="text-3xl font-headline font-extrabold text-primary mb-5">Create Slide</h1>
    <form method="POST" action="{{ route('admin.hero-slides.store') }}" class="grid gap-4">
        @csrf
        <input class="rounded-md border border-outline-variant/60 px-4 py-3" name="title" placeholder="Slide title" required>
        <input class="rounded-md border border-outline-variant/60 px-4 py-3" name="subtitle" placeholder="Slide subtitle">
        <input class="rounded-md border border-outline-variant/60 px-4 py-3" name="image_url" placeholder="Image URL" required>
        <div class="grid sm:grid-cols-2 gap-4">
            <input class="rounded-md border border-outline-variant/60 px-4 py-3" name="button_text" placeholder="Button text">
            <input class="rounded-md border border-outline-variant/60 px-4 py-3" name="button_url" placeholder="Button URL">
        </div>
        <input class="rounded-md border border-outline-variant/60 px-4 py-3" type="number" min="0" name="sort_order" placeholder="Sort order" value="0">
        <label class="inline-flex items-center gap-2 font-semibold"><input type="checkbox" name="is_active" value="1" checked> Active</label>
        <div class="flex gap-2">
            <button class="px-5 py-3 rounded-md bg-primary text-white font-bold" type="submit">Save</button>
            <a href="{{ route('admin.hero-slides.index') }}" class="px-5 py-3 rounded-md border border-outline-variant font-semibold">Cancel</a>
        </div>
    </form>
</div>
@endsection