{% extends "base.html" %}
{% block title %}Phones{% endblock %}
{% block content %}
<div class="grid grid-cols-4 gap-4" id="phone-grid" hx-get="/api/phones/grid" hx-trigger="every 3s" hx-swap="innerHTML">
    {% for slot, phone in state.phones.items() %}
    <div class="bg-card border border-{% if phone.status == 'running' %}success{% else %}border{% endif %} rounded-lg p-3 text-center">
        <div class="bg-border h-32 rounded mb-2 flex items-center justify-center">
            <span class="text-gray-500">📱</span>
        </div>
        <div class="{% if phone.status == 'running' %}text-success{% elif phone.status == 'error' %}text-accent{% else %}text-gray-500{% endif %}">● Phone {{ slot + 1 }}</div>
        <div class="text-gray-500 text-xs">{{ phone.status }}</div>
    </div>
    {% endfor %}
    <div class="bg-card border border-border rounded-lg p-3 text-center opacity-50 cursor-pointer hover:opacity-100 transition" hx-post="/api/phones/boot" hx-swap="none">
        <div class="bg-border h-32 rounded mb-2 flex items-center justify-center">
            <span class="text-2xl">+</span>
        </div>
        <div>Add Phone</div>
    </div>
</div>
{% endblock %}