{% extends "base.html" %}
{% block title %}Your Everyday Tools{% endblock %}

{% block content %}
<div class="home-hero">
    <h1>Your Everyday Tools</h1>
    <p>All the utilities you need, in one place.</p>
    <div class="home-search">
        <input type="text" id="tool-search" placeholder="Search tools..." autocomplete="off">
    </div>
</div>

{% for cat in tool_categories %}
<div class="category-section">
    <div class="category-title">
        <i class="bi {{ cat.icon }}"></i> {{ cat.name }}
    </div>
    <div class="tools-grid">
        {% for tool in cat.tools %}
        <a href="/{{ cat.id }}/{{ tool.id }}" class="tool-card" data-search="{{ (tool.name ~ ' ' ~ tool.desc) | lower }}">
            <div class="card-icon"><i class="bi {{ tool.icon }}"></i></div>
            <div class="card-body">
                <h3>{{ tool.name }}</h3>
                <p>{{ tool.desc }}</p>
            </div>
        </a>
        {% endfor %}
    </div>
</div>
{% endfor %}
<p id="search-empty" class="search-empty" style="display:none;">No tools match your search.</p>
{% endblock %}