{% extends "base.html" %}
{% block title %}Accounts — {{ config.APP_NAME }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2 class="mb-0"><i class="bi bi-person-badge"></i> Accounts</h2>
    <a href="{{ url_for('account.add_account') }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-repeat"></i> Connect another account
    </a>
</div>

{% if accounts %}
<div class="row g-4">
    {% for a in accounts %}
    <div class="col-md-6 col-lg-4">
        <div class="card bg-dark border-secondary h-100 post-card">
            <div class="card-body">
                <div class="d-flex align-items-center gap-3 mb-3">
                    {% if a.avatar_url %}
                    <img src="{{ a.avatar_url }}" class="rounded-circle" width="48" height="48">
                    {% else %}
                    <i class="bi bi-person-badge fs-1" style="color: var(--tt-cyan);"></i>
                    {% endif %}
                    <div>
                        <h5 class="mb-0">{{ a.display_name }}</h5>
                        <span class="text-secondary small">{{ '{:,}'.format(a.follower_count or 0) }} followers</span>
                    </div>
                </div>
                <div class="d-flex gap-2">
                    {% if a.id == active_id %}
                    <span class="badge text-bg-success align-self-center">Active</span>
                    {% else %}
                    <form method="post" action="{{ url_for('account.activate_account', account_db_id=a.id) }}">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <button type="submit" class="btn btn-outline-secondary btn-sm">Switch</button>
                    </form>
                    {% endif %}
                    <form method="post" action="{{ url_for('account.refresh_account', account_db_id=a.id) }}">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <button type="submit" class="btn btn-outline-secondary btn-sm">
                            <i class="bi bi-arrow-clockwise"></i> Refresh
                        </button>
                    </form>
                    <form method="post" action="{{ url_for('account.delete_account', account_db_id=a.id) }}"
                          onsubmit="return confirm('Disconnect {{ a.display_name }}? Its tokens are deleted from this app.');">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <button type="submit" class="btn btn-outline-danger btn-sm">
                            <i class="bi bi-x-circle"></i> Disconnect
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="text-center py-5">
    <i class="bi bi-person-badge text-secondary" style="font-size: 3rem;"></i>
    <h4 class="text-secondary mt-3">No accounts connected</h4>
    <a href="{{ url_for('account.add_account') }}" class="btn text-light mt-2"
       style="background: linear-gradient(90deg, var(--tt-pink), var(--tt-cyan));">
        <i class="bi bi-tiktok"></i> Connect with TikTok
    </a>
</div>
{% endif %}
{% endblock %}