{% extends "./layout.html" %}
{% block content %}
<style>
    .clubs-wrapper {
        height: 100vh;
        max-height: 100vh;
        background: var(--bg-primary);
        padding: 15px;
        overflow-y: scroll;
        box-sizing: border-box;
    }

    .clubs-container {
        max-width: 1200px;
        margin: 0 auto;
    }

    .header-section {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding: 15px 20px;
        background: var(--bg-card);
        border: 2px solid var(--border-primary);
        border-radius: 12px;
        box-shadow: var(--shadow-card);
        flex-wrap: wrap;
        gap: 10px;
    }

    .header-title {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--yellow-glow);
        display: flex;
        align-items: center;
        gap: 10px;
    }

    [data-theme="light"] .header-title {
        color: var(--orange-primary);
    }

    .header-actions {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .btn-primary {
        padding: 10px 20px;
        border-radius: 8px;
        border: 2px solid #FFD700;
        background: linear-gradient(135deg, #FF8C00 0%, #FF6B00 100%);
        color: white;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.85rem;
    }

    .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 20px rgba(255, 140, 0, 0.5);
    }

    .btn-secondary {
        padding: 8px 16px;
        border-radius: 8px;
        border: 2px solid rgba(255, 140, 0, 0.4);
        background: rgba(255, 107, 0, 0.1);
        color: #FFA500;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.8rem;
    }

    .btn-secondary:hover {
        background: rgba(255, 107, 0, 0.2);
        border-color: #FFD700;
        color: #FFD700;
    }

    .btn-danger {
        padding: 8px 16px;
        border-radius: 8px;
        border: 2px solid rgba(255, 0, 0, 0.4);
        background: rgba(255, 0, 0, 0.1);
        color: #FF6B6B;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 0.8rem;
    }

    .btn-danger:hover {
        background: rgba(255, 0, 0, 0.2);
        border-color: #FF4444;
    }

    .btn-small {
        padding: 5px 10px;
        font-size: 0.7rem;
    }

    .clubs-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        gap: 20px;
    }

    .club-card {
        background: var(--bg-card);
        border: 2px solid var(--border-primary);
        border-radius: 12px;
        padding: 20px;
        transition: all 0.3s ease;
        box-shadow: var(--shadow-card);
    }

    .club-card:hover {
        border-color: #FFD700;
        box-shadow: 0 5px 20px rgba(255, 140, 0, 0.2);
        transform: translateY(-3px);
    }

    .club-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 12px;
    }

    .club-name {
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--yellow-glow);
        display: flex;
        align-items: center;
        gap: 8px;
    }

    [data-theme="light"] .club-name {
        color: var(--text-primary);
    }

    .role-badge {
        padding: 3px 8px;
        border-radius: 12px;
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .role-owner {
        background: linear-gradient(135deg, #FFD700, #FFA500);
        color: #000;
    }

    .role-moderator {
        background: linear-gradient(135deg, #9333EA, #7C3AED);
        color: #fff;
    }

    .role-member {
        background: rgba(255, 140, 0, 0.2);
        color: #FFA500;
    }

    .club-members-badge {
        padding: 4px 12px;
        background: rgba(255, 215, 0, 0.15);
        border: 1px solid rgba(255, 215, 0, 0.3);
        border-radius: 20px;
        font-size: 0.75rem;
        color: #FFD700;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .club-description {
        color: var(--text-accent);
        font-size: 0.85rem;
        line-height: 1.5;
        margin-bottom: 12px;
        min-height: 40px;
    }

    .club-meta {
        display: flex;
        gap: 15px;
        margin-bottom: 15px;
        flex-wrap: wrap;
    }

    .club-meta-item {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 0.75rem;
        color: rgba(255, 165, 0, 0.7);
    }

    .club-meta-item i {
        color: #FFA500;
    }

    .join-mode-badge {
        padding: 3px 8px;
        border-radius: 8px;
        font-size: 0.7rem;
        font-weight: 600;
    }

    .join-mode-open {
        background: rgba(0, 255, 100, 0.15);
        color: #00FF64;
        border: 1px solid rgba(0, 255, 100, 0.3);
    }

    .join-mode-invite {
        background: rgba(255, 215, 0, 0.15);
        color: #FFD700;
        border: 1px solid rgba(255, 215, 0, 0.3);
    }

    .join-mode-closed {
        background: rgba(255, 0, 0, 0.15);
        color: #FF6B6B;
        border: 1px solid rgba(255, 0, 0, 0.3);
    }

    .club-actions {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    /* Tabs */
    .tabs-container {
        display: flex;
        gap: 5px;
        margin-bottom: 20px;
        background: var(--bg-card);
        padding: 5px;
        border-radius: 10px;
        border: 1px solid var(--border-primary);
    }

    .tab-btn {
        padding: 10px 20px;
        border: none;
        background: transparent;
        color: rgba(255, 165, 0, 0.6);
        font-weight: 600;
        cursor: pointer;
        border-radius: 8px;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .tab-btn:hover {
        background: rgba(255, 140, 0, 0.1);
        color: #FFA500;
    }

    .tab-btn.active {
        background: linear-gradient(135deg, #FF8C00 0%, #FF6B00 100%);
        color: white;
    }

    .tab-badge {
        background: rgba(255, 255, 255, 0.2);
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 0.7rem;
    }

    .tab-content {
        display: none;
    }

    .tab-content.active {
        display: block;
    }

    /* Modal Styles */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.85);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        padding: 20px;
    }

    .modal {
        background: var(--bg-card);
        backdrop-filter: blur(20px);
        border: 2px solid rgba(255, 140, 0, 0.4);
        border-radius: 16px;
        padding: 25px;
        max-width: 600px;
        width: 100%;
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-title {
        font-size: 1.3rem;
        font-weight: 800;
        color: #FFD700;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .form-label {
        display: block;
        color: #FFD700;
        font-size: 0.8rem;
        font-weight: 600;
        margin-bottom: 6px;
    }

    .form-input,
    .form-textarea,
    .form-select {
        width: 100%;
        padding: 10px 12px;
        border-radius: 8px;
        border: 2px solid rgba(255, 140, 0, 0.3);
        background: rgba(0, 0, 0, 0.5);
        color: white;
        font-size: 0.85rem;
        box-sizing: border-box;
    }

    .form-input:focus,
    .form-textarea:focus,
    .form-select:focus {
        outline: none;
        border-color: #FFD700;
    }

    .form-select option {
        background: #1a1a1a;
        color: white;
    }

    .modal-actions {
        display: flex;
        gap: 10px;
        margin-top: 20px;
        justify-content: flex-end;
    }

    /* Members List in Modal */
    .members-list {
        max-height: 300px;
        overflow-y: auto;
    }

    .member-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px;
        border-bottom: 1px solid rgba(255, 140, 0, 0.2);
        gap: 10px;
    }

    .member-info {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1;
    }

    .member-avatar {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: linear-gradient(135deg, #FF8C00, #FF6B00);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 700;
        font-size: 0.9rem;
    }

    .member-name {
        color: #FFA500;
        font-weight: 600;
    }

    .member-actions {
        display: flex;
        gap: 5px;
    }

    /* Announcements */
    .announcement-item {
        background: rgba(255, 107, 0, 0.05);
        border: 1px solid rgba(255, 140, 0, 0.2);
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 10px;
    }

    .announcement-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 10px;
    }

    .announcement-title {
        font-weight: 700;
        color: #FFD700;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .announcement-pinned {
        color: #FFD700;
        font-size: 0.8rem;
    }

    .announcement-meta {
        font-size: 0.75rem;
        color: rgba(255, 165, 0, 0.6);
    }

    .announcement-content {
        color: var(--text-accent);
        font-size: 0.9rem;
        line-height: 1.6;
    }

    /* Invites Section */
    .invites-banner {
        background: linear-gradient(135deg, rgba(147, 51, 234, 0.2), rgba(124, 58, 237, 0.1));
        border: 2px solid rgba(147, 51, 234, 0.4);
        border-radius: 12px;
        padding: 15px 20px;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .invites-banner-text {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #A855F7;
        font-weight: 600;
    }

    .section-title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--yellow-glow);
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    [data-theme="light"] .section-title {
        color: var(--orange-primary);
    }

    .back-link {
        color: var(--text-accent);
        text-decoration: none;
        font-size: 0.85rem;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 15px;
    }

    .back-link:hover {
        color: var(--yellow-glow);
    }

    .empty-state {
        text-align: center;
        padding: 40px 20px;
        color: #FFA500;
    }

    .empty-state i {
        font-size: 2.5rem;
        opacity: 0.5;
        margin-bottom: 10px;
    }

    /* Toast Notifications */
    .toast {
        position: fixed;
        bottom: 20px;
        right: 20px;
        padding: 15px 25px;
        border-radius: 10px;
        color: white;
        font-weight: 600;
        z-index: 2000;
        animation: slideIn 0.3s ease;
    }

    .toast-success {
        background: linear-gradient(135deg, #10B981, #059669);
        border: 2px solid #34D399;
    }

    .toast-error {
        background: linear-gradient(135deg, #EF4444, #DC2626);
        border: 2px solid #F87171;
    }

    @keyframes slideIn {
        from {
            transform: translateX(100%);
            opacity: 0;
        }

        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    /* Stats Grid */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 15px;
        margin-bottom: 20px;
    }

    .stat-card {
        background: rgba(255, 107, 0, 0.1);
        border: 1px solid rgba(255, 140, 0, 0.3);
        border-radius: 10px;
        padding: 15px;
        text-align: center;
    }

    .stat-value {
        font-size: 1.5rem;
        font-weight: 800;
        color: #FFD700;
    }

    .stat-label {
        font-size: 0.75rem;
        color: rgba(255, 165, 0, 0.7);
    }

    @media (max-width: 768px) {
        .clubs-grid {
            grid-template-columns: 1fr;
        }

        .header-section {
            flex-direction: column;
            align-items: stretch;
        }

        .tabs-container {
            flex-wrap: wrap;
        }
    }

    @media (max-width: 768px) {
        .clubs-grid {
            grid-template-columns: 1fr;
        }

        .header-actions {
            justify-content: stretch;
        }

        .header-actions .btn-primary,
        .header-actions .btn-secondary {
            flex: 1;
            justify-content: center;
        }
    }

    /* === LIGHT THEME OVERRIDES === */
    [data-theme="light"] .header-title,
    [data-theme="light"] .club-name,
    [data-theme="light"] .stat-value,
    [data-theme="light"] .member-name,
    [data-theme="light"] .section-title,
    [data-theme="light"] .modal-title {
        color: #FF6B00;
    }

    [data-theme="light"] .club-description,
    [data-theme="light"] .stat-label,
    [data-theme="light"] .member-role,
    [data-theme="light"] .announcement-text,
    [data-theme="light"] .empty-state {
        color: #666;
    }

    [data-theme="light"] .club-card {
        background: rgba(255, 255, 255, 0.8);
        border-color: rgba(255, 107, 0, 0.3);
    }

    [data-theme="light"] .club-card:hover {
        border-color: #FF6B00;
        background: rgba(255, 255, 255, 0.95);
    }

    [data-theme="light"] .stat-card {
        background: rgba(255, 107, 0, 0.05);
        border-color: rgba(255, 107, 0, 0.2);
    }

    [data-theme="light"] .tab-btn {
        color: #666;
    }

    [data-theme="light"] .tab-btn.active {
        background: linear-gradient(135deg, #FF8C00 0%, #FF6B00 100%);
        color: white;
    }

    [data-theme="light"] .member-item {
        background: rgba(255, 255, 255, 0.6);
        border-color: rgba(255, 107, 0, 0.2);
    }

    [data-theme="light"] .announcement-item {
        background: rgba(255, 255, 255, 0.6);
        border-left-color: #FF6B00;
    }

    [data-theme="light"] .modal {
        background: rgba(255, 255, 255, 0.98);
    }

    [data-theme="light"] .btn-secondary {
        color: #d97706;
        /* darker orange */
        border-color: rgba(217, 119, 6, 0.4);
        background: rgba(217, 119, 6, 0.05);
    }

    [data-theme="light"] .btn-secondary:hover {
        background: rgba(217, 119, 6, 0.15);
        border-color: #d97706;
    }

    /* Confirm Dialog */
    .confirm-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.9);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 2000;
        padding: 20px;
        animation: fadeIn 0.2s ease;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .confirm-box {
        background: var(--bg-card);
        border: 2px solid var(--orange-primary);
        border-radius: 16px;
        padding: 25px;
        max-width: 400px;
        width: 100%;
        text-align: center;
        animation: scaleIn 0.2s ease;
    }

    @keyframes scaleIn {
        from {
            transform: scale(0.9);
            opacity: 0;
        }

        to {
            transform: scale(1);
            opacity: 1;
        }
    }

    .confirm-icon {
        font-size: 3rem;
        color: #FFD700;
        margin-bottom: 15px;
    }

    .confirm-icon.danger {
        color: #FF4444;
    }

    .confirm-title {
        font-size: 1.2rem;
        font-weight: 700;
        color: #FFD700;
        margin-bottom: 10px;
    }

    .confirm-text {
        font-size: 0.9rem;
        color: var(--text-accent);
        margin-bottom: 20px;
        line-height: 1.5;
    }

    .confirm-buttons {
        display: flex;
        gap: 12px;
        justify-content: center;
    }

    .confirm-btn {
        padding: 12px 24px;
        border-radius: 10px;
        font-weight: 600;
        font-size: 0.9rem;
        cursor: pointer;
        border: none;
        transition: all 0.2s ease;
    }

    .confirm-btn.primary {
        background: linear-gradient(135deg, #FF8C00, #FF6B00);
        color: white;
    }

    .confirm-btn.danger {
        background: linear-gradient(135deg, #FF4444, #CC0000);
        color: white;
    }

    .confirm-btn.secondary {
        background: rgba(255, 140, 0, 0.1);
        border: 2px solid rgba(255, 140, 0, 0.4);
        color: #FFA500;
    }

    .confirm-btn:hover {
        transform: translateY(-2px);
    }
</style>

<div class="clubs-wrapper">
    <div class="clubs-container">
        <a href="{{ url_for('user_home', username=username) }}" class="back-link">
            <i class="fas fa-arrow-left"></i> Назад
        </a>

        <div class="header-section">
            <div class="header-title">
                <i class="fas fa-users"></i>
                Клубы
            </div>
            <div class="header-actions">
                <button class="btn-primary" onclick="openCreateModal()">
                    <i class="fas fa-plus"></i> Создать клуб
                </button>
            </div>
        </div>

        <!-- Pending Invites Banner -->
        <div class="invites-banner" id="invites-banner" style="display: none;">
            <div class="invites-banner-text">
                <i class="fas fa-envelope"></i>
                <span>У вас есть приглашения в клубы!</span>
            </div>
            <button class="btn-secondary" onclick="openInvitesModal()">
                <i class="fas fa-eye"></i> Посмотреть
            </button>
        </div>

        <!-- Tabs -->
        <div class="tabs-container">
            <button class="tab-btn active" onclick="switchTab('my-clubs')">
                <i class="fas fa-star"></i> Мои клубы
                <span class="tab-badge" id="my-clubs-count">0</span>
            </button>
            <button class="tab-btn" onclick="switchTab('all-clubs')">
                <i class="fas fa-globe"></i> Все клубы
                <span class="tab-badge" id="all-clubs-count">0</span>
            </button>
        </div>

        <!-- My Clubs Tab -->
        <div class="tab-content active" id="tab-my-clubs">
            <div class="clubs-grid" id="my-clubs-list">
                <div class="empty-state">
                    <i class="fas fa-spinner fa-spin"></i>
                    <p>Загрузка...</p>
                </div>
            </div>
        </div>

        <!-- All Clubs Tab -->
        <div class="tab-content" id="tab-all-clubs">
            <div class="clubs-grid" id="clubs-list">
                <div class="empty-state">
                    <i class="fas fa-spinner fa-spin"></i>
                    <p>Загрузка...</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Create Club Modal -->
<div class="modal-overlay" id="create-modal" onclick="closeCreateModal()">
    <div class="modal" onclick="event.stopPropagation()">
        <div class="modal-title">
            <i class="fas fa-users-cog"></i>
            Создать клуб
        </div>

        <form id="create-club-form">
            <div class="form-group">
                <label class="form-label">Название клуба *</label>
                <input type="text" class="form-input" name="name" required placeholder="Введите название">
            </div>

            <div class="form-group">
                <label class="form-label">Описание</label>
                <textarea class="form-textarea" name="description" rows="3"
                    placeholder="Расскажите о клубе..."></textarea>
            </div>

            <div class="form-group">
                <label class="form-label">Режим вступления</label>
                <select class="form-select" name="join_mode">
                    <option value="open">🔓 Открытый - все могут вступить</option>
                    <option value="invite">🔐 По приглашению</option>
                    <option value="closed">🔒 Закрытый</option>
                </select>
            </div>

            <div class="modal-actions">
                <button type="button" class="btn-secondary" onclick="closeCreateModal()">Отмена</button>
                <button type="submit" class="btn-primary">
                    <i class="fas fa-check"></i> Создать
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Club Details Modal -->
<div class="modal-overlay" id="club-details-modal" onclick="closeDetailsModal()">
    <div class="modal" onclick="event.stopPropagation()" style="max-width: 700px;">
        <div class="modal-title">
            <i class="fas fa-users"></i>
            <span id="club-details-name">Клуб</span>
            <span id="club-details-role-badge"></span>
        </div>

        <div id="club-details-description" style="color: #FFA500; margin-bottom: 20px;"></div>

        <!-- Club Stats -->
        <div class="stats-grid" id="club-stats-grid"></div>

        <!-- Club Tabs -->
        <div class="tabs-container" style="margin-bottom: 15px;">
            <button class="tab-btn active" onclick="switchClubTab('members')">
                <i class="fas fa-user-friends"></i> Участники
            </button>
            <button class="tab-btn" onclick="switchClubTab('announcements')">
                <i class="fas fa-bullhorn"></i> Объявления
            </button>
            <button class="tab-btn" onclick="switchClubTab('settings')" id="settings-tab" style="display: none;">
                <i class="fas fa-cog"></i> Управление
            </button>
        </div>

        <!-- Members Tab -->
        <div class="club-tab-content active" id="club-tab-members">
            <div class="members-list" id="club-members-list"></div>
        </div>

        <!-- Announcements Tab -->
        <div class="club-tab-content" id="club-tab-announcements" style="display: none;">
            <button class="btn-secondary" onclick="openAnnouncementModal()" id="create-announcement-btn"
                style="display: none; margin-bottom: 15px;">
                <i class="fas fa-plus"></i> Создать объявление
            </button>
            <div id="club-announcements-list"></div>
        </div>

        <!-- Settings Tab (Owner/Mod only) -->
        <div class="club-tab-content" id="club-tab-settings" style="display: none;">
            <form id="club-settings-form">
                <div class="form-group">
                    <label class="form-label">Название</label>
                    <input type="text" class="form-input" name="name" id="settings-name">
                </div>
                <div class="form-group">
                    <label class="form-label">Описание</label>
                    <textarea class="form-textarea" name="description" rows="3" id="settings-description"></textarea>
                </div>
                <div class="form-group">
                    <label class="form-label">Режим вступления</label>
                    <select class="form-select" name="join_mode" id="settings-join-mode">
                        <option value="open">🔓 Открытый</option>
                        <option value="invite">🔐 По приглашению</option>
                        <option value="closed">🔒 Закрытый</option>
                    </select>
                </div>
                <div class="modal-actions">
                    <button type="button" class="btn-danger" onclick="confirmDeleteClub()" id="delete-club-btn">
                        <i class="fas fa-trash"></i> Удалить клуб
                    </button>
                    <button type="submit" class="btn-primary">
                        <i class="fas fa-save"></i> Сохранить
                    </button>
                </div>
            </form>
        </div>

        <div class="modal-actions"
            style="border-top: 1px solid rgba(255,140,0,0.2); padding-top: 15px; margin-top: 15px;">
            <button class="btn-secondary" onclick="closeDetailsModal()">Закрыть</button>
        </div>
    </div>
</div>

<!-- Invites Modal -->
<div class="modal-overlay" id="invites-modal" onclick="closeInvitesModal()">
    <div class="modal" onclick="event.stopPropagation()">
        <div class="modal-title">
            <i class="fas fa-envelope-open"></i>
            Приглашения в клубы
        </div>
        <div id="invites-list"></div>
        <div class="modal-actions">
            <button class="btn-secondary" onclick="closeInvitesModal()">Закрыть</button>
        </div>
    </div>
</div>

<!-- Announcement Modal -->
<div class="modal-overlay" id="announcement-modal" onclick="closeAnnouncementModal()">
    <div class="modal" onclick="event.stopPropagation()">
        <div class="modal-title">
            <i class="fas fa-bullhorn"></i>
            Новое объявление
        </div>
        <form id="announcement-form">
            <div class="form-group">
                <label class="form-label">Заголовок</label>
                <input type="text" class="form-input" name="title" placeholder="Заголовок (опционально)">
            </div>
            <div class="form-group">
                <label class="form-label">Текст объявления *</label>
                <textarea class="form-textarea" name="content" rows="4" required
                    placeholder="Текст объявления..."></textarea>
            </div>
            <div class="form-group">
                <label style="display: flex; align-items: center; gap: 8px; color: #FFA500;">
                    <input type="checkbox" name="pinned"> Закрепить объявление
                </label>
            </div>
            <div class="modal-actions">
                <button type="button" class="btn-secondary" onclick="closeAnnouncementModal()">Отмена</button>
                <button type="submit" class="btn-primary">
                    <i class="fas fa-paper-plane"></i> Опубликовать
                </button>
            </div>
        </form>
    </div>
</div>

<!-- Confirm Dialog -->
<div class="confirm-overlay" id="confirm-dialog">
    <div class="confirm-box">
        <div class="confirm-icon" id="confirm-icon"><i class="fas fa-question-circle"></i></div>
        <div class="confirm-title" id="confirm-title">Подтверждение</div>
        <div class="confirm-text" id="confirm-text">Вы уверены?</div>
        <div class="confirm-buttons">
            <button class="confirm-btn secondary" onclick="closeConfirmDialog()">Отмена</button>
            <button class="confirm-btn primary" id="confirm-action-btn" onclick="executeConfirmAction()">Да</button>
        </div>
    </div>
</div>

<script>
    let currentClubId = null;
    let currentUserRole = null;
    let myClubs = [];

    // Toast notification
    function showToast(message, type = 'success') {
        const toast = document.createElement('div');
        toast.className = `toast toast-${type}`;
        toast.innerHTML = `<i class="fas fa-${type === 'success' ? 'check-circle' : 'exclamation-circle'}"></i> ${message}`;
        document.body.appendChild(toast);
        setTimeout(() => toast.remove(), 3000);
    }

    // Tab switching
    function switchTab(tab) {
        document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
        document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));

        event.currentTarget.classList.add('active');
        document.getElementById(`tab-${tab}`).classList.add('active');
    }

    function switchClubTab(tab) {
        document.querySelectorAll('#club-details-modal .tab-btn').forEach(btn => btn.classList.remove('active'));
        document.querySelectorAll('.club-tab-content').forEach(content => content.style.display = 'none');

        event.currentTarget.classList.add('active');
        document.getElementById(`club-tab-${tab}`).style.display = 'block';
    }

    // Load clubs
    async function loadClubs() {
        try {
            const response = await fetch('/api/clubs');
            if (response.ok) {
                const clubs = await response.json();
                document.getElementById('all-clubs-count').textContent = clubs.length;
                renderClubs(clubs, 'clubs-list', false);
            }
        } catch (error) {
            console.error('Error:', error);
        }
    }

    async function loadMyClubs() {
        try {
            const response = await fetch('/api/clubs/my');
            if (response.ok) {
                myClubs = await response.json();
                document.getElementById('my-clubs-count').textContent = myClubs.length;
                renderClubs(myClubs, 'my-clubs-list', true);
            }
        } catch (error) {
            console.error('Error:', error);
        }
    }

    async function loadMyInvites() {
        try {
            const response = await fetch('/api/clubs/invites/my');
            if (response.ok) {
                const invites = await response.json();
                if (invites.length > 0) {
                    document.getElementById('invites-banner').style.display = 'flex';
                    renderInvites(invites);
                }
            }
        } catch (error) {
            console.error('Error:', error);
        }
    }

    function renderClubs(clubs, containerId, isMyClubs = false) {
        const container = document.getElementById(containerId);

        if (clubs.length === 0) {
            container.innerHTML = `
                <div class="empty-state">
                    <i class="fas fa-users-slash"></i>
                    <p>${isMyClubs ? 'Вы не состоите ни в одном клубе' : 'Клубов пока нет'}</p>
                </div>
            `;
            return;
        }

        container.innerHTML = clubs.map(club => {
            const role = club.role || null;
            const roleLevel = club.role_level || 0;
            let roleBadge = '';
            let actionBtn = '';

            if (role === 'owner') {
                roleBadge = '<span class="role-badge role-owner"><i class="fas fa-crown"></i> Владелец</span>';
            } else if (role === 'moderator') {
                roleBadge = '<span class="role-badge role-moderator"><i class="fas fa-shield-alt"></i> Модератор</span>';
            } else if (role === 'member') {
                roleBadge = '<span class="role-badge role-member">Участник</span>';
            }

            if (isMyClubs) {
                if (role === 'owner') {
                    actionBtn = `<button class="btn-danger btn-small" onclick="deleteClubDirect(${club.id}, '${club.name.replace(/'/g, "\\'")}')"><i class="fas fa-trash"></i> Удалить</button>`;
                } else {
                    actionBtn = `<button class="btn-danger btn-small" onclick="leaveClub(${club.id})"><i class="fas fa-sign-out-alt"></i> Покинуть</button>`;
                }
            } else {
                const isMember = myClubs.some(c => c.id === club.id);
                if (!isMember) {
                    const joinMode = club.join_mode || 'open';
                    if (joinMode === 'open') {
                        actionBtn = `<button class="btn-primary btn-small" onclick="joinClub(${club.id})"><i class="fas fa-user-plus"></i> Вступить</button>`;
                    } else {
                        actionBtn = `<button class="btn-secondary btn-small" disabled><i class="fas fa-lock"></i> Закрыто</button>`;
                    }
                } else {
                    actionBtn = `<span class="role-badge role-member">Участник</span>`;
                }
            }

            const joinMode = club.join_mode || 'open';
            const joinModeIcons = { open: '🔓', invite: '🔐', closed: '🔒' };
            const joinModeLabels = { open: 'Открытый', invite: 'По приглашению', closed: 'Закрытый' };

            return `
                <div class="club-card">
                    <div class="club-header">
                        <div class="club-name">
                            ${club.name}
                            ${roleBadge}
                        </div>
                        <div class="club-members-badge">
                            <i class="fas fa-users"></i>
                            ${club.member_count || 0}
                        </div>
                    </div>
                    <div class="club-description">${club.description || 'Нет описания'}</div>
                    <div class="club-meta">
                        <span class="join-mode-badge join-mode-${joinMode}">
                            ${joinModeIcons[joinMode]} ${joinModeLabels[joinMode]}
                        </span>
                    </div>
                    <div class="club-actions">
                        ${actionBtn}
                        <button class="btn-secondary btn-small" onclick="viewClub(${club.id})">
                            <i class="fas fa-eye"></i> Подробнее
                        </button>
                    </div>
                </div>
            `;
        }).join('');
    }

    function renderInvites(invites) {
        const container = document.getElementById('invites-list');
        container.innerHTML = invites.map(invite => `
            <div class="member-item">
                <div class="member-info">
                    <div class="member-avatar">${invite.club_name[0].toUpperCase()}</div>
                    <div>
                        <div class="member-name">${invite.club_name}</div>
                        <div style="font-size: 0.75rem; color: rgba(255,165,0,0.6);">
                            Приглашает: ${invite.first_name || ''} ${invite.last_name || ''}
                        </div>
                    </div>
                </div>
                <div class="member-actions">
                    <button class="btn-primary btn-small" onclick="acceptInvite(${invite.id})">
                        <i class="fas fa-check"></i>
                    </button>
                    <button class="btn-danger btn-small" onclick="rejectInvite(${invite.id})">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        `).join('') || '<div class="empty-state">Нет приглашений</div>';
    }

    async function joinClub(clubId) {
        try {
            const response = await fetch(`/api/clubs/${clubId}/join`, { method: 'POST' });
            if (response.ok) {
                showToast('Вы вступили в клуб!');
                loadClubs();
                loadMyClubs();
            } else {
                const data = await response.json();
                showToast(data.error || 'Ошибка', 'error');
            }
        } catch (error) {
            showToast('Ошибка сети', 'error');
        }
    }

    async function leaveClub(clubId) {
        showConfirmDialog('Покинуть клуб?', 'Вы уверены, что хотите покинуть этот клуб?', () => doLeaveClub(clubId), 'warning');
    }

    async function doLeaveClub(clubId) {

        try {
            const response = await fetch(`/api/clubs/${clubId}/leave`, { method: 'POST' });
            const data = await response.json();
            if (data.success) {
                showToast('Вы покинули клуб');
                loadClubs();
                loadMyClubs();
            } else {
                showToast('Владелец не может покинуть клуб', 'error');
            }
        } catch (error) {
            showToast('Ошибка', 'error');
        }
    }

    async function viewClub(clubId) {
        currentClubId = clubId;
        const modal = document.getElementById('club-details-modal');

        document.getElementById('club-details-name').textContent = 'Загрузка...';
        document.getElementById('club-details-description').textContent = '';
        document.getElementById('club-members-list').innerHTML = '<div class="empty-state"><i class="fas fa-spinner fa-spin"></i></div>';
        modal.style.display = 'flex';

        try {
            // Get club details
            const [clubRes, roleRes, statsRes, announcementsRes] = await Promise.all([
                fetch(`/api/clubs/${clubId}`),
                fetch(`/api/clubs/${clubId}/my-role`),
                fetch(`/api/clubs/${clubId}/stats`),
                fetch(`/api/clubs/${clubId}/announcements`)
            ]);

            const club = await clubRes.json();
            const role = await roleRes.json();
            const stats = await statsRes.json();
            const announcements = await announcementsRes.json();

            currentUserRole = role;

            document.getElementById('club-details-name').textContent = club.name;
            document.getElementById('club-details-description').textContent = club.description || 'Нет описания';

            // Role badge
            const roleBadgeEl = document.getElementById('club-details-role-badge');
            if (role.role === 'owner') {
                roleBadgeEl.innerHTML = '<span class="role-badge role-owner"><i class="fas fa-crown"></i> Владелец</span>';
            } else if (role.role === 'moderator') {
                roleBadgeEl.innerHTML = '<span class="role-badge role-moderator"><i class="fas fa-shield-alt"></i> Модератор</span>';
            } else if (role.role === 'member') {
                roleBadgeEl.innerHTML = '<span class="role-badge role-member">Участник</span>';
            } else {
                roleBadgeEl.innerHTML = '';
            }

            // Stats
            document.getElementById('club-stats-grid').innerHTML = `
                <div class="stat-card"><div class="stat-value">${stats.total_members}</div><div class="stat-label">Участников</div></div>
                <div class="stat-card"><div class="stat-value">${stats.role_counts?.moderator || 0}</div><div class="stat-label">Модераторов</div></div>
                <div class="stat-card"><div class="stat-value">${stats.announcements}</div><div class="stat-label">Объявлений</div></div>
            `;

            // Members
            const members = club.members || [];
            renderMembers(members, role.role_level || 0);

            // Announcements
            renderAnnouncements(announcements, role.role_level || 0);

            // Show settings tab for owner/moderator
            if (role.role_level >= 2) {
                document.getElementById('settings-tab').style.display = 'flex';
                document.getElementById('create-announcement-btn').style.display = 'block';

                // Fill settings form
                document.getElementById('settings-name').value = club.name;
                document.getElementById('settings-description').value = club.description || '';
                document.getElementById('settings-join-mode').value = club.join_mode || 'open';

                // Only owner can delete
                document.getElementById('delete-club-btn').style.display = role.role === 'owner' ? 'block' : 'none';
            } else {
                document.getElementById('settings-tab').style.display = 'none';
                document.getElementById('create-announcement-btn').style.display = 'none';
            }

        } catch (e) {
            console.error(e);
            document.getElementById('club-members-list').innerHTML = '<div class="empty-state">Ошибка загрузки</div>';
        }
    }

    function renderMembers(members, userRoleLevel) {
        const container = document.getElementById('club-members-list');

        container.innerHTML = members.map(m => {
            const name = ((m.first_name || '') + ' ' + (m.last_name || '')).trim() || 'Участник';
            let roleBadge = '';
            let actions = '';

            if (m.role === 'owner') {
                roleBadge = '<span class="role-badge role-owner"><i class="fas fa-crown"></i></span>';
            } else if (m.role === 'moderator') {
                roleBadge = '<span class="role-badge role-moderator"><i class="fas fa-shield-alt"></i></span>';
            }

            // Actions based on permissions
            if (userRoleLevel >= 2 && m.role !== 'owner' && m.role_level < userRoleLevel) {
                actions = `
                    <button class="btn-secondary btn-small" onclick="kickMember(${m.player_id})" title="Кик"><i class="fas fa-user-minus"></i></button>
                    <button class="btn-danger btn-small" onclick="banMember(${m.player_id})" title="Бан"><i class="fas fa-ban"></i></button>
                `;
                if (userRoleLevel >= 3) {
                    const newRole = m.role === 'moderator' ? 'member' : 'moderator';
                    const icon = m.role === 'moderator' ? 'fa-user' : 'fa-shield-alt';
                    actions += `<button class="btn-secondary btn-small" onclick="setRole(${m.player_id}, '${newRole}')" title="${newRole === 'moderator' ? 'Назначить модератором' : 'Снять модератора'}"><i class="fas ${icon}"></i></button>`;
                }
            }

            return `
                <div class="member-item">
                    <div class="member-info">
                        <div class="member-avatar">${name[0].toUpperCase()}</div>
                        <span class="member-name">${name}</span>
                        ${roleBadge}
                    </div>
                    <div class="member-actions">${actions}</div>
                </div>
            `;
        }).join('') || '<div class="empty-state">Нет участников</div>';
    }

    function renderAnnouncements(announcements, userRoleLevel) {
        const container = document.getElementById('club-announcements-list');

        container.innerHTML = announcements.map(a => {
            const authorName = ((a.first_name || '') + ' ' + (a.last_name || '')).trim() || 'Анон';
            const date = new Date(a.created_at).toLocaleDateString('ru-RU');
            const canDelete = userRoleLevel >= 2;

            return `
                <div class="announcement-item">
                    <div class="announcement-header">
                        <div class="announcement-title">
                            ${a.pinned ? '<i class="fas fa-thumbtack announcement-pinned"></i>' : ''}
                            ${a.title || 'Без заголовка'}
                        </div>
                        <div class="announcement-meta">${authorName} • ${date}</div>
                    </div>
                    <div class="announcement-content">${a.content}</div>
                    ${canDelete ? `<button class="btn-danger btn-small" onclick="deleteAnnouncement(${a.id})" style="margin-top: 10px;"><i class="fas fa-trash"></i></button>` : ''}
                </div>
            `;
        }).join('') || '<div class="empty-state">Нет объявлений</div>';
    }

    // Member actions
    async function kickMember(playerId) {
        showConfirmDialog('Удалить участника?', 'Этот участник будет удалён из клуба.', () => doKickMember(playerId), 'danger');
    }

    async function doKickMember(playerId) {

        const response = await fetch(`/api/clubs/${currentClubId}/members/${playerId}/kick`, { method: 'POST' });
        const data = await response.json();
        if (data.success) {
            showToast('Участник удалён');
            viewClub(currentClubId);
        } else {
            showToast(data.error || 'Ошибка', 'error');
        }
    }

    async function banMember(playerId) {
        const reason = prompt('Причина бана (опционально):');

        const response = await fetch(`/api/clubs/${currentClubId}/members/${playerId}/ban`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ reason })
        });
        const data = await response.json();
        if (data.success) {
            showToast('Пользователь забанен');
            viewClub(currentClubId);
        } else {
            showToast(data.error || 'Ошибка', 'error');
        }
    }

    async function setRole(playerId, newRole) {
        const response = await fetch(`/api/clubs/${currentClubId}/members/${playerId}/role`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ role: newRole })
        });
        const data = await response.json();
        if (data.success) {
            showToast('Роль изменена');
            viewClub(currentClubId);
        } else {
            showToast(data.error || 'Ошибка', 'error');
        }
    }

    async function acceptInvite(inviteId) {
        const response = await fetch(`/api/clubs/invites/${inviteId}/accept`, { method: 'POST' });
        const data = await response.json();
        if (data.success) {
            showToast('Вы вступили в клуб!');
            loadMyClubs();
            loadMyInvites();
            closeInvitesModal();
        } else {
            showToast(data.error || 'Ошибка', 'error');
        }
    }

    async function rejectInvite(inviteId) {
        const response = await fetch(`/api/clubs/invites/${inviteId}/reject`, { method: 'POST' });
        loadMyInvites();
        closeInvitesModal();
    }

    async function deleteAnnouncement(announcementId) {
        showConfirmDialog('Удалить объявление?', 'Это объявление будет удалено навсегда.', () => doDeleteAnnouncement(announcementId), 'danger');
    }

    async function doDeleteAnnouncement(announcementId) {

        const response = await fetch(`/api/clubs/announcements/${announcementId}`, { method: 'DELETE' });
        const data = await response.json();
        if (data.success) {
            showToast('Объявление удалено');
            viewClub(currentClubId);
        }
    }

    async function confirmDeleteClub() {
        showConfirmDialog('Удалить клуб?', 'ВНИМАНИЕ! Клуб и все его данные будут удалены НАВСЕГДА. Это действие нельзя отменить!', doDeleteClub, 'danger');
    }

    async function doDeleteClub() {

        const response = await fetch(`/api/clubs/${currentClubId}`, { method: 'DELETE' });
        const data = await response.json();
        if (data.success) {
            showToast('Клуб удалён');
            closeDetailsModal();
            loadClubs();
            loadMyClubs();
        } else {
            showToast(data.error || 'Ошибка', 'error');
        }
    }

    async function deleteClubDirect(clubId, clubName) {
        showConfirmDialog('Удалить клуб?', `ВНИМАНИЕ! Клуб "${clubName}" и все его данные будут удалены НАВСЕГДА!`, () => doDeleteClubDirect(clubId), 'danger');
    }

    async function doDeleteClubDirect(clubId) {

        try {
            const response = await fetch(`/api/clubs/${clubId}`, { method: 'DELETE' });
            const data = await response.json();
            if (data.success) {
                showToast('Клуб удалён');
                loadClubs();
                loadMyClubs();
            } else {
                showToast(data.error || 'Ошибка', 'error');
            }
        } catch (error) {
            showToast('Ошибка сети', 'error');
        }
    }

    // Modals
    function openCreateModal() { document.getElementById('create-modal').style.display = 'flex'; }
    function closeCreateModal() { document.getElementById('create-modal').style.display = 'none'; }
    function closeDetailsModal() { document.getElementById('club-details-modal').style.display = 'none'; currentClubId = null; }
    function openInvitesModal() { document.getElementById('invites-modal').style.display = 'flex'; }
    function closeInvitesModal() { document.getElementById('invites-modal').style.display = 'none'; }
    function openAnnouncementModal() { document.getElementById('announcement-modal').style.display = 'flex'; }
    function closeAnnouncementModal() { document.getElementById('announcement-modal').style.display = 'none'; }

    // Confirm Dialog
    let pendingConfirmAction = null;

    function showConfirmDialog(title, text, action, type = 'warning') {
        document.getElementById('confirm-title').textContent = title;
        document.getElementById('confirm-text').textContent = text;
        const icon = document.getElementById('confirm-icon');
        const btn = document.getElementById('confirm-action-btn');

        if (type === 'danger') {
            icon.innerHTML = '<i class="fas fa-exclamation-triangle"></i>';
            icon.className = 'confirm-icon danger';
            btn.className = 'confirm-btn danger';
            btn.textContent = 'Удалить';
        } else {
            icon.innerHTML = '<i class="fas fa-question-circle"></i>';
            icon.className = 'confirm-icon';
            btn.className = 'confirm-btn primary';
            btn.textContent = 'Да';
        }

        pendingConfirmAction = action;
        document.getElementById('confirm-dialog').style.display = 'flex';
    }

    function closeConfirmDialog() {
        document.getElementById('confirm-dialog').style.display = 'none';
        pendingConfirmAction = null;
    }

    function executeConfirmAction() {
        closeConfirmDialog();
        if (pendingConfirmAction) pendingConfirmAction();
    }

    // Forms
    document.getElementById('create-club-form').addEventListener('submit', async function (e) {
        e.preventDefault();
        const formData = new FormData(this);
        const data = Object.fromEntries(formData.entries());

        const response = await fetch('/api/clubs', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        });

        if (response.ok) {
            showToast('Клуб создан!');
            closeCreateModal();
            this.reset();
            loadClubs();
            loadMyClubs();
        } else {
            const err = await response.json();
            showToast(err.error || 'Ошибка', 'error');
        }
    });

    document.getElementById('club-settings-form').addEventListener('submit', async function (e) {
        e.preventDefault();
        const formData = new FormData(this);
        const data = Object.fromEntries(formData.entries());

        const response = await fetch(`/api/clubs/${currentClubId}`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        });

        if (response.ok) {
            showToast('Настройки сохранены');
            loadClubs();
            loadMyClubs();
            viewClub(currentClubId);
        } else {
            const err = await response.json();
            showToast(err.error || 'Ошибка', 'error');
        }
    });

    document.getElementById('announcement-form').addEventListener('submit', async function (e) {
        e.preventDefault();
        const formData = new FormData(this);
        const data = {
            title: formData.get('title'),
            content: formData.get('content'),
            pinned: formData.get('pinned') === 'on'
        };

        const response = await fetch(`/api/clubs/${currentClubId}/announcements`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        });

        if (response.ok) {
            showToast('Объявление опубликовано');
            closeAnnouncementModal();
            this.reset();
            viewClub(currentClubId);
        } else {
            const err = await response.json();
            showToast(err.error || 'Ошибка', 'error');
        }
    });

    // Initial load
    document.addEventListener('DOMContentLoaded', function () {
        loadClubs();
        loadMyClubs();
        loadMyInvites();
    });
</script>

{% endblock %}