{{ define "main" }}
<div class="tools">
    <h1 class="page-title">小工具</h1>
    
    {{ $tools := .Site.Data.tools }}
    
    {{ if $tools }}
    <div class="tools-container">
        {{ range $tools }}
        <div class="tool-item">
            <a href="/tools/{{ .file_name }}" class="card tool-card" data-tool-url="/tools/{{ .file_name }}">
                <div class="tool-icon">🛠️</div>
                <h3 class="tool-name">{{ .name }}</h3>
            </a>
        </div>
        {{ end }}
    </div>
    {{ else }}
    <div class="empty-state">
        <div class="empty-state-icon">🛠️</div>
        <p>暂无工具</p>
    </div>
    {{ end }}
</div>

<style>
.tools-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.tool-item {
    text-align: center;
}

.tool-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.tool-card {
    padding: 2rem 1rem;
    transition: var(--transition);
}

.tool-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
}

.tool-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-color);
}
</style>
{{ end }}