{% extends "base.html" %}

{% block title %}All Bots - Bot Master{% endblock %}

{% block extra_css %}
<style>
    .bots-table {
        width: 100%;
        border-collapse: collapse;
    }
    
    .bots-table th,
    .bots-table td {
        padding: 1rem;
        text-align: left;
        border-bottom: 1px solid var(--border);
    }
    
    .bots-table th {
        color: var(--text-secondary);
        font-weight: 500;
        text-transform: uppercase;
        font-size: 0.75rem;
        letter-spacing: 0.05em;
    }
    
    .bots-table tr:hover {
        background: var(--bg-secondary);
    }
    
    .bot-name-cell {
        display: flex;
        align-items: center;
        gap: 1rem;
    }
    
    .bot-icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        background: var(--accent);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
    }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
    <h1>All Bots</h1>
    <a href="/bots/add" class="btn btn-primary">Add Bot</a>
</div>

<div class="card">
    {% if bots %}
    <table class="bots-table">
        <thead>
            <tr>
                <th>Bot</th>
                <th>Status</th>
                <th>Servers</th>
                <th>Commands</th>
                <th>Last Checked</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for bot in bots %}
            <tr>
                <td>
                    <div class="bot-name-cell">
                        <div class="bot-icon">{{ bot.name[0].upper() }}</div>
                        <div>
                            <div style="font-weight: 500;">{{ bot.name }}</div>
                            <div style="font-size: 0.875rem; color: var(--text-secondary);">{{ bot.bot_type|capitalize }}</div>
                        </div>
                    </div>
                </td>
                <td>
                    <span class="status-badge status-{{ bot.status }}">
                        <span class="pulse"></span>
                        {{ bot.status|capitalize }}
                    </span>
                </td>
                <td>{{ bot.guild_count or 0 }}</td>
                <td>{{ bot.command_count or 0 }}</td>
                <td>
                    {% if bot.last_checked %}
                    {{ bot.last_checked.strftime('%b %d, %H:%M') }}
                    {% else %}
                    Never
                    {% endif %}
                </td>
                <td>
                    <a href="/bots/{{ bot.id }}" class="btn btn-secondary btn-sm">View</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p style="text-align: center; color: var(--text-secondary); padding: 2rem;">No bots added yet.</p>
    {% endif %}
</div>
{% endblock %}