{{define "home.html"}}
{{template "header" .}}
<div class="home-container{{if .BackgroundImage}} has-background{{end}}"{{if .BackgroundImage}} style="background-image: url('{{.BackgroundImage}}?thumb=1'); background-size: cover; background-position: center; background-attachment: fixed;"{{end}}>
    <header class="home-header">
        <h1 class="home-title">{{.SiteTitle}}</h1>
        {{if .SiteSubtitle}}<p class="site-subtitle">{{.SiteSubtitle}}</p>{{else}}<p class="home-subtitle">快速导航，一键直达</p>{{end}}
    </header>

    <div class="search-box">
        <form id="search-form" action="/search" method="GET">
            <input type="text" id="search-input" name="q" class="search-input" placeholder="搜索..." autofocus>
            <button type="submit" class="search-btn">搜索</button>
        </form>
    </div>

    <div class="card-grid">
        {{range .Cards}}
        <a href="/click/{{.ID}}" class="card-item" target="_blank" rel="noopener noreferrer">
            <div class="card-icon">{{if .Icon}}{{if hasPrefix .Icon "/uploads/"}}<img src="{{.Icon}}?thumb=1" alt="{{.Title}}" class="card-icon-img">{{else}}<span class="card-emoji">{{.Icon}}</span>{{end}}{{else}}<span class="card-emoji">🔗</span>{{end}}</div>
            <div class="card-content">
                <div class="card-title">{{.Title}}</div>
                {{if .Subtitle}}<div class="card-subtitle">{{.Subtitle}}</div>{{end}}
            </div>
        </a>
        {{end}}
    </div>

    <footer class="home-footer">
        <a href="/admin/login">管理后台</a>
    </footer>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('search-input').focus();
});
</script>
{{template "footer" .}}
{{end}}