@extends('storefront.layout', ['title' => 'Tstore · ' . ($type === 'plugin' ? '插件' : '主题')])

@section('hero')
<div class="hero-grid">
    <div class="hero-card">
        <h1>{{ $type === 'plugin' ? '插件目录' : '主题目录' }}</h1>
        <p>支持按分类和关键词浏览 {{ $type === 'plugin' ? '插件' : '主题' }}，这里只展示信息，不直接提供下载地址。</p>
    </div>
    <div class="hero-card">
        <form method="get" class="toolbar" style="margin:0">
            <div class="filters" style="width:100%">
                <div class="field" style="flex:1 1 220px">
                    <label>关键词</label>
                    <input class="input" type="text" name="keyword" value="{{ $filters['keyword'] }}" placeholder="搜索名称、slug 或摘要">
                </div>
                <div class="field">
                    <label>分类</label>
                    <select class="select" name="category">
                        <option value="">全部</option>
                        @foreach($categories as $category)
                            <option value="{{ $category->slug }}" @selected($filters['category'] === $category->slug)>{{ $category->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="field">
                    <label>排序</label>
                    <select class="select" name="sort">
                        <option value="latest" @selected($filters['sort'] === 'latest')>最新更新</option>
                        <option value="name" @selected($filters['sort'] === 'name')>按名称</option>
                    </select>
                </div>
            </div>
            <div class="card-actions">
                <button class="btn" type="submit">筛选</button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('content')
<div class="panel">
    <div class="section-head">
        <div>
            <h2>{{ $type === 'plugin' ? '插件列表' : '主题列表' }}</h2>
            <p>共 {{ $packages->total() }} 项结果</p>
        </div>
    </div>
    <div class="grid">
        @forelse($packages as $package)
            <div class="card">
                <div class="card-top">
                    @if($package->icon_url)
                        <img class="icon" src="{{ $package->icon_url }}" alt="{{ $package->name }}">
                    @else
                        <div class="icon"></div>
                    @endif
                    <div>
                        <div class="title">{{ $package->name }}</div>
                        <div class="muted">{{ $package->author ?: '未知作者' }} · {{ $package->latestStableVersion?->version ?: $package->latest_version }}</div>
                    </div>
                </div>
                <div class="summary">{{ $package->summary ?: '暂无摘要' }}</div>
                <div class="tags">
                    @foreach($package->categories as $category)
                        <span class="chip">{{ $category->name }}</span>
                    @endforeach
                </div>
                <div class="card-actions">
                    <a class="btn secondary" href="{{ route('storefront.show', [$package->type, $package->slug]) }}">查看详情</a>
                </div>
            </div>
        @empty
            <div class="empty">当前没有符合条件的{{ $type === 'plugin' ? '插件' : '主题' }}。</div>
        @endforelse
    </div>
    <div style="margin-top:18px">{{ $packages->links() }}</div>
</div>
@endsection