@extends('admin.layout')

@section('title', '首页 Hero 轮播')
@section('page-title', '首页 Hero 轮播')
@section('actions')
    <a href="{{ route('admin.hero-slides.create') }}" class="btn btn-primary btn-sm"><x-icon name="plus" :size="16"/> 新建轮播项</a>
@endsection

@section('content')
<div class="panel" style="margin-bottom:20px;padding:16px 18px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-2)">
    <div class="flex items-center justify-between flex-wrap gap-3">
        <div>
            <div class="font-semibold text-fg">Hero 显示模式</div>
            <div class="form-hint">轮播：启用项自动切换播放；独立单图：仅展示第一条启用项（不轮播）。</div>
        </div>
        <form method="POST" action="{{ route('admin.hero.mode') }}" class="flex gap-2">
            @csrf
            <button type="submit" name="hero_mode" value="carousel" class="btn btn-sm {{ $mode === 'carousel' ? 'btn-primary' : '' }}">轮播</button>
            <button type="submit" name="hero_mode" value="single" class="btn btn-sm {{ $mode === 'single' ? 'btn-primary' : '' }}">独立单图</button>
        </form>
    </div>
</div>

<table class="data-table">
    <thead>
        <tr>
            <th style="width:90px">排序</th>
            <th style="width:90px">启用</th>
            <th>标题（后台标识）</th>
            <th class="col-op">操作</th>
        </tr>
    </thead>
    <tbody>
    @forelse ($slides as $slide)
        <tr>
            <td class="row-actions">
                <form method="POST" action="{{ route('admin.hero-slides.move', $slide) }}" class="inline">
                    @csrf
                    <input type="hidden" name="direction" value="up">
                    <button class="btn btn-sm" title="上移" {{ $loop->first ? 'disabled' : '' }}><x-icon name="up" :size="16"/></button>
                </form>
                <form method="POST" action="{{ route('admin.hero-slides.move', $slide) }}" class="inline">
                    @csrf
                    <input type="hidden" name="direction" value="down">
                    <button class="btn btn-sm" title="下移" {{ $loop->last ? 'disabled' : '' }}><x-icon name="down" :size="16"/></button>
                </form>
            </td>
            <td>
                <form method="POST" action="{{ route('admin.hero-slides.toggle', $slide) }}" class="inline">
                    @csrf
                    <button class="btn btn-sm {{ $slide->is_active ? 'btn-primary' : '' }}" title="{{ $slide->is_active ? '点击停用' : '点击启用' }}">
                        {{ $slide->is_active ? '启用中' : '已停用' }}
                    </button>
                </form>
            </td>
            <td>{{ $slide->title }}</td>
            <td class="row-actions">
                <a href="{{ route('admin.hero-slides.edit', $slide) }}" class="btn btn-sm"><x-icon name="edit" :size="16"/></a>
                <form method="POST" action="{{ route('admin.hero-slides.destroy', $slide) }}" class="inline" onsubmit="return confirm('确认删除该轮播项？')">
                    @csrf @method('DELETE')
                    <button class="btn btn-sm btn-danger"><x-icon name="trash" :size="16"/></button>
                </form>
            </td>
        </tr>
    @empty
        <tr><td colspan="4" class="muted">暂无轮播项，请点击右上角「新建轮播项」。</td></tr>
    @endforelse
    </tbody>
</table>
@endsection