@extends('layouts.admin')
@section('title', $template->template_name)
@section('page-title', $template->template_name)
@section('content')
<div class="max-w-3xl space-y-6">
    <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        <dl class="grid gap-4 sm:grid-cols-2">
            <div><dt class="text-sm font-medium text-slate-500">Garment type</dt><dd class="mt-1 text-sm font-medium text-slate-800">{{ $template->garment_type }}</dd></div>
            <div><dt class="text-sm font-medium text-slate-500">Status</dt><dd><span class="inline-flex rounded-full px-2.5 py-0.5 text-xs font-medium {{ $template->status === 'active' ? 'bg-emerald-100 text-emerald-800' : 'bg-slate-100 text-slate-800' }}">{{ $template->status }}</span></dd></div>
            <div class="sm:col-span-2"><dt class="text-sm font-medium text-slate-500">Description</dt><dd class="mt-1 text-sm text-slate-800">{{ $template->description ?? '-' }}</dd></div>
        </dl>
        <div class="mt-6 flex gap-3">
            @can('edit measurements')<a href="{{ route('measurement-templates.edit', $template) }}" class="rounded-lg bg-slate-800 px-4 py-2 text-sm font-medium text-white hover:bg-slate-700">Edit</a>@endcan
            <a href="{{ route('measurement-templates.index') }}" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Back</a>
        </div>
    </div>
    <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        <h2 class="text-lg font-semibold text-slate-800 mb-4">Fields ({{ $template->fields->count() }})</h2>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-slate-200">
                <thead class="bg-slate-50"><tr><th class="px-4 py-2 text-left text-xs font-medium text-slate-600">#</th><th class="px-4 py-2 text-left text-xs font-medium text-slate-600">Field name</th><th class="px-4 py-2 text-left text-xs font-medium text-slate-600">Label</th><th class="px-4 py-2 text-left text-xs font-medium text-slate-600">Type</th><th class="px-4 py-2 text-left text-xs font-medium text-slate-600">Unit</th><th class="px-4 py-2 text-left text-xs font-medium text-slate-600">Required</th></tr></thead>
                <tbody class="divide-y divide-slate-200">
                    @foreach($template->fields as $i => $f)
                    <tr><td class="px-4 py-2 text-sm text-slate-600">{{ $i + 1 }}</td><td class="px-4 py-2 text-sm font-mono">{{ $f->field_name }}</td><td class="px-4 py-2 text-sm">{{ $f->label }}</td><td class="px-4 py-2 text-sm">{{ $f->input_type }}</td><td class="px-4 py-2 text-sm">{{ $f->unit ?? '-' }}</td><td class="px-4 py-2 text-sm">{{ $f->is_required ? 'Yes' : 'No' }}</td></tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection