{% extends "base.html" %}

{% block extra_head %}
<link rel="stylesheet" href="{{ static_url('/static/css/seo-tool.css') }}">
{% endblock %}

{% block content %}
<div class="tools-page">
    <header class="tools-header">
        <h1>Tools</h1>
        <p>Practical developer tools, available to everyone.</p>
    </header>
    <div class="tools-grid">
        {% for tool in tools %}
        <a href="{{ tool.url }}" class="tool-card">
            <span class="tool-card-icon" aria-hidden="true">{{ tool.icon }}</span>
            <span class="tool-card-name">{{ tool.name }}</span>
            <span class="tool-card-desc">{{ tool.description }}</span>
        </a>
        {% endfor %}
    </div>
</div>
{% endblock %}