{% extends "base.html" %}

{% block title %}Supported Crawlers - OJHunt Lite{% endblock %}

{% block page_max_width %}900px{% endblock %}

{% block extra_head %}
    <style>
        * { box-sizing: border-box; }

        .header { text-align: center; margin-bottom: 2rem; }
        .header .logo { height: 60px; margin-bottom: 0.5rem; }
        .header h1 { margin: 0; font-size: 1.5rem; }

        table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
        th, td { padding: 0.6rem 0.75rem; text-align: left; border-bottom: 1px solid #ddd; }
        th { background: #f5f5f5; font-weight: 600; }

        .crawler-tag { font-family: monospace; font-size: 0.85rem; color: #555; }
        .crawler-link { color: #0066cc; text-decoration: none; }
        .crawler-link:hover { text-decoration: underline; }
        .crawler-desc { color: #666; font-size: 0.875rem; }

        .status-online { color: #22863a; font-weight: 500; }
        .status-offline { color: #cb2431; font-weight: 500; }
        .status-waiting { color: #999; }
        .status-has-error { cursor: help; }

        /* ── Mobile: hide Description, card layout ── */
        @media (max-width: 540px) {
            th:nth-child(3), td:nth-child(3) { display: none; }

            table, thead, tbody, th, td, tr { display: block; }
            thead tr { display: none; }
            tbody tr {
                border: 1px solid #ddd;
                border-radius: 6px;
                margin-bottom: 0.6rem;
                padding: 0.25rem 0;
            }
            tbody td {
                border-bottom: none;
                padding: 0.3rem 0.75rem;
                display: flex;
                align-items: flex-start;
                gap: 0.5rem;
            }
            tbody td::before {
                font-weight: 600;
                color: #555;
                font-size: 0.8rem;
                min-width: 60px;
                flex-shrink: 0;
            }
            tbody td:nth-child(1)::before { content: "Tag"; }
            tbody td:nth-child(2)::before { content: "Name"; }
            tbody td:nth-child(4)::before { content: "Status"; }
        }
    </style>
{% endblock %}

{% block content %}
    <div class="header">
        <img src="/static/logo.png" alt="OJHunt Logo" class="logo">
        <h1>Supported Crawlers</h1>
    </div>

    <table>
        <thead>
            <tr>
                <th>Tag</th>
                <th>Name</th>
                <th>Description</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            {% for c in crawlers %}
            <tr>
                <td><span class="crawler-tag">{{ c.name }}</span></td>
                <td>
                    {% if c.url %}
                    <a href="{{ c.url }}" target="_blank" rel="noopener noreferrer" class="crawler-link">{{ c.title }}</a>
                    {% else %}
                    {{ c.title }}
                    {% endif %}
                </td>
                <td><span class="crawler-desc">{{ c.description }}</span></td>
                <td>
                    {% if c.availability.status.value == "online" %}
                    <span class="status-online">Online</span>
                    {% elif c.availability.status.value == "offline" %}
                    <span class="status-offline{% if c.availability.error %} status-has-error{% endif %}"
                      {% if c.availability.error %}title="{{ c.availability.error }}"{% endif %}>Offline</span>
                    {% else %}
                    <span class="status-waiting">Waiting...</span>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
{% endblock %}