{% extends "baseTemplate/index.html" %}
{% load i18n %}
{% block title %}{% trans "Reseller Center - CyberPanel" %}{% endblock %}
{% block content %}

{% load static %}
{% get_current_language as LANGUAGE_CODE %}
<!-- Current language: {{ LANGUAGE_CODE }} -->

<style>
    body {
        background-color: var(--bg-primary, #f0f0ff);
    }
    .page-wrapper {
        background: transparent;
        padding: 20px;
    }
    .page-container {
        max-width: 1200px;
        margin: 0 auto;
    }
    
    /* Page Header */
    .page-header {
        background: var(--bg-secondary, white);
        border-radius: 12px;
        padding: 25px;
        margin-bottom: 25px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        border: 1px solid var(--border-color, #e8e9ff);
    }
    .page-header h1 {
        font-size: 28px;
        font-weight: 700;
        color: var(--text-primary, #2f3640);
        margin: 0 0 10px 0;
        display: flex;
        align-items: center;
        gap: 15px;
    }
    .page-header .icon {
        width: 48px;
        height: 48px;
        background: var(--accent-color, #5856d6);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 24px;
        box-shadow: 0 4px 12px rgba(88,86,214,0.3);
    }
    .page-header p {
        font-size: 15px;
        color: var(--text-secondary, #64748b);
        margin: 0;
    }
    
    /* Stats Cards */
    .stats-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin-bottom: 25px;
    }
    .stat-card {
        background: var(--bg-secondary, white);
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        border: 1px solid var(--border-color, #e8e9ff);
        display: flex;
        align-items: center;
        gap: 15px;
        transition: all 0.3s ease;
    }
    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .stat-icon {
        width: 56px;
        height: 56px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        flex-shrink: 0;
    }
    .stat-icon.users {
        background: rgba(88,86,214,0.1);
        color: var(--accent-color, #5856d6);
    }
    .stat-icon.sites {
        background: var(--success-bg, rgba(16,185,129,0.1));
        color: var(--success-text, #10b981);
    }
    .stat-icon.resellers {
        background: var(--warning-bg, rgba(251,146,60,0.1));
        color: var(--warning-text, #fb923c);
    }
    .stat-content h3 {
        font-size: 24px;
        font-weight: 700;
        color: var(--text-primary, #2f3640);
        margin: 0;
    }
    .stat-content p {
        font-size: 14px;
        color: var(--text-secondary, #64748b);
        margin: 0;
    }
    
    /* Main Content */
    .content-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }
    
    .content-card {
        background: var(--bg-secondary, white);
        border-radius: 12px;
        padding: 25px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        border: 1px solid var(--border-color, #e8e9ff);
    }
    
    .content-card.full-width {
        grid-column: 1 / -1;
    }
    
    .section-title {
        font-size: 18px;
        font-weight: 700;
        color: var(--text-primary, #2f3640);
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .section-title::before {
        content: '';
        width: 4px;
        height: 24px;
        background: var(--accent-color, #5856d6);
        border-radius: 2px;
    }
    
    /* Info Features */
    .features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        margin-bottom: 25px;
    }
    .feature-item {
        background: var(--bg-hover, #f8f9ff);
        border-radius: 8px;
        padding: 15px;
        text-align: center;
        transition: all 0.3s ease;
        border: 1px solid var(--border-color, #e8e9ff);
    }
    .feature-item:hover {
        background: #e8e6ff;
        transform: translateY(-2px);
    }
    .feature-item i {
        font-size: 28px;
        color: var(--accent-color, #5856d6);
        margin-bottom: 10px;
        display: block;
    }
    .feature-item h4 {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary, #2f3640);
        margin: 0 0 5px 0;
    }
    .feature-item p {
        font-size: 12px;
        color: var(--text-secondary, #64748b);
        margin: 0;
    }
    
    /* Form Styling */
    .form-group {
        margin-bottom: 20px;
    }
    .form-label {
        color: var(--text-primary, #2f3640);
        font-weight: 600;
        margin-bottom: 8px;
        display: block;
        font-size: 14px;
    }
    .form-control {
        border: 2px solid var(--border-color, #e8e9ff);
        border-radius: 8px;
        padding: 12px 16px;
        font-size: 15px;
        transition: all 0.3s ease;
        width: 100%;
        box-sizing: border-box;
        background: var(--bg-hover, #f8f9ff);
        color: var(--text-primary, #2f3640);
    }
    .form-control:focus {
        border-color: var(--accent-color, #5856d6);
        box-shadow: 0 0 0 3px rgba(88,86,214,0.1);
        outline: none;
        background: var(--bg-secondary, white);
    }
    .help-text {
        color: var(--text-secondary, #94a3b8);
        font-size: 13px;
        margin-top: 5px;
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .help-text i {
        font-size: 12px;
    }
    
    /* Buttons */
    .btn-primary {
        background: var(--accent-color, #5856d6);
        border: none;
        border-radius: 8px;
        padding: 12px 28px;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 0.5px;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(88,86,214,0.3);
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: white;
        cursor: pointer;
    }
    .btn-primary:hover {
        background: #4644c0;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(88,86,214,0.4);
    }
    
    /* Quick Actions */
    .quick-actions {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
    }
    .quick-action {
        background: var(--bg-hover, #f8f9ff);
        border: 2px solid var(--border-color, #e8e9ff);
        border-radius: 8px;
        padding: 8px 16px;
        font-size: 13px;
        font-weight: 600;
        color: var(--accent-color, #5856d6);
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .quick-action:hover {
        background: var(--accent-color, #5856d6);
        color: white;
        border-color: var(--accent-color, #5856d6);
    }
    
    /* Loading State */
    .loading-icon {
        width: 20px;
        height: 20px;
        margin-left: 10px;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
        .content-row {
            grid-template-columns: 1fr;
        }
        .stats-row {
            grid-template-columns: 1fr;
        }
        .page-header h1 {
            font-size: 24px;
        }
        .stat-icon {
            width: 48px;
            height: 48px;
            font-size: 20px;
        }
        .features-grid {
            grid-template-columns: 1fr;
        }
    }
</style>

<div class="page-wrapper" ng-controller="resellerCenterCTRL">
    <div class="page-container">
        <!-- Page Header -->
        <div class="page-header">
            <h1>
                <div class="icon">
                    <i class="fas fa-store"></i>
                </div>
                {% trans "Reseller Center" %}
            </h1>
            <p>{% trans "Manage your reseller network, transfer ownership, and control resource allocation" %}</p>
        </div>

        <!-- Stats Cards -->
        <div class="stats-row">
            <div class="stat-card">
                <div class="stat-icon users">
                    <i class="fas fa-users"></i>
                </div>
                <div class="stat-content">
                    <h3>{{ userToBeModified|length }}</h3>
                    <p>{% trans "Total Users" %}</p>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon sites">
                    <i class="fas fa-globe"></i>
                </div>
                <div class="stat-content">
                    <h3>{{ totalWebsites|default:"0" }}</h3>
                    <p>{% trans "Total Websites" %}</p>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon resellers">
                    <i class="fas fa-user-tie"></i>
                </div>
                <div class="stat-content">
                    <h3>{{ resellerPrivUsers|length }}</h3>
                    <p>{% trans "Resellers" %}</p>
                </div>
            </div>
        </div>

        <div class="content-row">
            <!-- Features Card -->
            <div class="content-card">
                <h3 class="section-title">{% trans "Reseller Features" %}</h3>
                <div class="features-grid">
                    <div class="feature-item">
                        <i class="fas fa-exchange-alt"></i>
                        <h4>{% trans "Transfer Ownership" %}</h4>
                        <p>{% trans "Move users between resellers" %}</p>
                    </div>
                    <div class="feature-item">
                        <i class="fas fa-chart-line"></i>
                        <h4>{% trans "Resource Control" %}</h4>
                        <p>{% trans "Set website limits" %}</p>
                    </div>
                    <div class="feature-item">
                        <i class="fas fa-shield-alt"></i>
                        <h4>{% trans "Access Management" %}</h4>
                        <p>{% trans "Control permissions" %}</p>
                    </div>
                    <div class="feature-item">
                        <i class="fas fa-tachometer-alt"></i>
                        <h4>{% trans "Monitor Usage" %}</h4>
                        <p>{% trans "Track resources" %}</p>
                    </div>
                </div>
            </div>

            <!-- Management Form -->
            <div class="content-card">
                <h3 class="section-title">
                    {% trans "User Management" %}
                    <img class="loading-icon" ng-hide="aclLoading" src="{% static 'images/loading.gif' %}">
                </h3>
                
                <form action="/" class="form-horizontal">
                    <!-- User Selection -->
                    <div class="form-group">
                        <label class="form-label">{% trans "Select User" %}</label>
                        <select ng-model="userToBeModified" class="form-control">
                            <option value="">-- {% trans "Choose a user to modify" %} --</option>
                            {% for items in userToBeModified %}
                                <option>{{ items }}</option>
                            {% endfor %}
                        </select>
                        <p class="help-text">
                            <i class="fas fa-info-circle"></i>
                            {% trans "Select the user account you want to modify" %}
                        </p>
                    </div>

                    <!-- Quick Actions -->
                    <div class="quick-actions" ng-show="userToBeModified">
                        <div class="quick-action" ng-click="websitesLimit='0'">
                            <i class="fas fa-infinity"></i>
                            {% trans "Set Unlimited" %}
                        </div>
                        <div class="quick-action" ng-click="websitesLimit='10'">
                            <i class="fas fa-globe"></i>
                            {% trans "10 Sites" %}
                        </div>
                        <div class="quick-action" ng-click="websitesLimit='50'">
                            <i class="fas fa-server"></i>
                            {% trans "50 Sites" %}
                        </div>
                    </div>

                    <!-- Ownership Transfer -->
                    <div class="form-group">
                        <label class="form-label">{% trans "Transfer Ownership To" %}</label>
                        <select ng-model="newOwner" class="form-control">
                            <option value="">-- {% trans "Keep current owner" %} --</option>
                            {% for items in resellerPrivUsers %}
                                <option>{{ items }}</option>
                            {% endfor %}
                        </select>
                        <p class="help-text">
                            <i class="fas fa-exchange-alt"></i>
                            {% trans "Transfer to another reseller or admin account" %}
                        </p>
                    </div>

                    <!-- Resource Limits -->
                    <div class="form-group">
                        <label class="form-label">{% trans "Website Creation Limit" %}</label>
                        <input type="number" 
                               class="form-control" 
                               ng-model="websitesLimit" 
                               placeholder="0 = Unlimited" 
                               min="0"
                               required>
                        <p class="help-text">
                            <i class="fas fa-chart-bar"></i>
                            {% trans "Maximum websites this user can create (0 for unlimited)" %}
                        </p>
                    </div>

                    <!-- Submit Button -->
                    <div class="form-group" style="margin-top: 30px;">
                        <button type="button" 
                                ng-click="saveResellerChanges()" 
                                class="btn btn-primary"
                                ng-disabled="!userToBeModified">
                            <i class="fas fa-save"></i>
                            {% trans "Save Changes" %}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


{% endblock %}