{% extends "base.html" %}

{% block title %}Servers{% endblock %}

{% block styles %}
<link rel="stylesheet" href="{{ static_url('css/cards.css') }}">
{% endblock %}

{% block body_class %}bg-gradient-dark servers-container{% endblock %}

{% block content %}
<div class="container">
    <h1>Foothold Servers</h1>

    {% if servers %}
    <div class="cards-grid">
        {% for server in servers %}
        <a href="{{ request.url_for('foothold_map', server=server.name) }}" class="card">
            <h2 class="card-title">{{ server.name }}</h2>
            {% if server.updated_at %}
                {% set delta = (now - server.updated_at).total_seconds() %}
                {% if delta < 120 %}
                    <p class="card-meta fresh">Updated {{ (delta // 60) | int }} min ago</p>
                {% elif delta < 3600 %}
                    <p class="card-meta fresh">Updated {{ (delta // 60) | int }} min ago</p>
                {% elif delta < 86400 %}
                    <p class="card-meta stale">Updated {{ (delta // 3600) | int }}h ago</p>
                {% else %}
                    <p class="card-meta stale">Updated {{ (delta // 86400) | int }}d ago</p>
                {% endif %}
            {% else %}
                <p class="card-meta unknown">No data available</p>
            {% endif %}
        </a>
        {% endfor %}
    </div>
    {% else %}
    <div class="empty-state">
        <p>No Foothold servers found.</p>
    </div>
    {% endif %}

    <div class="back-link">
        <a class="btn btn-primary" href="{{ request.url_for('home') }}">Back to home</a>
    </div>
</div>
{% endblock %}