{% extends "base.html" %}

{% block title %}{{ _('My Rankings') }} - {{ _('Wunschkonzert') }}{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col">
        <h1 class="display-4"><i class="fas fa-star"></i> {{ _('My Rankings') }}</h1>
        {% if current_project %}
            <p class="lead">{{ _('Here are all the thoughts you\'ve ranked, marked as essential, or vetoed in project:') }} <strong>{{ current_project.name }}</strong></p>
        {% else %}
            <p class="lead">{{ _('Here are all the thoughts you\'ve ranked, marked as essential, or vetoed.') }}</p>
        {% endif %}
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        {% if rankings %}
            <ul class="nav nav-tabs mb-4" id="rankingTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="all-tab" data-bs-toggle="tab" data-bs-target="#all" type="button" role="tab" aria-controls="all" aria-selected="true">
                        {{ _('All Rankings') }}
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="essential-tab" data-bs-toggle="tab" data-bs-target="#essential" type="button" role="tab" aria-controls="essential" aria-selected="false">
                        {{ _('Essential') }} ({{ current_user.count_essentials() }}/5)
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="vetoed-tab" data-bs-toggle="tab" data-bs-target="#vetoed" type="button" role="tab" aria-controls="vetoed" aria-selected="false">
                        {{ _('Vetoed') }} ({{ current_user.count_vetoes() }}/5)
                    </button>
                </li>
            </ul>
            
            <div class="tab-content" id="rankingTabsContent">
                <div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tab">
                    {% for ranking in rankings %}
                        <div class="card thought-card mb-3">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <h5 class="card-title mb-0">{{ ranking.thought.content }}</h5>
                                    <div class="d-flex gap-2">
                                        {% if ranking.essential %}
                                            <span class="badge bg-success">Essential</span>
                                        {% endif %}
                                        {% if ranking.vetoed %}
                                            <span class="badge bg-danger">Vetoed</span>
                                        {% endif %}
                                        <span class="badge bg-primary rounded-pill">
                                            {{ ranking.points }} {{ _('points') }}
                                        </span>
                                    </div>
                                </div>
                                <p class="card-text text-muted small">
                                    <i class="fas fa-user"></i> {{ ranking.thought.author.name }} &bull;
                                    <i class="fas fa-calendar"></i> {{ ranking.thought.created_at.strftime('%Y-%m-%d %H:%M') }}
                                </p>
                                <div class="mt-2">
                                    <a href="{{ url_for('main.index') }}#thought-{{ ranking.thought.id }}" class="btn btn-sm btn-outline-primary">
                                        <i class="fas fa-edit"></i> Update Ranking
                                    </a>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>
                
                <div class="tab-pane fade" id="essential" role="tabpanel" aria-labelledby="essential-tab">
                    {% set essential_rankings = rankings|selectattr('essential', 'eq', true)|list %}
                    {% if essential_rankings %}
                        {% for ranking in essential_rankings %}
                            <div class="card thought-card mb-3">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <h5 class="card-title mb-0">{{ ranking.thought.content }}</h5>
                                        <div>
                                            <span class="badge bg-success">Essential</span>
                                        </div>
                                    </div>
                                    <p class="card-text text-muted small">
                                        <i class="fas fa-user"></i> {{ ranking.thought.author.name }} &bull;
                                        <i class="fas fa-calendar"></i> {{ ranking.thought.created_at.strftime('%Y-%m-%d %H:%M') }}
                                    </p>
                                    <div class="mt-2">
                                        <a href="{{ url_for('main.index') }}#thought-{{ ranking.thought.id }}" class="btn btn-sm btn-outline-primary">
                                            <i class="fas fa-edit"></i> Update Ranking
                                        </a>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle"></i> {{ _("You haven't marked any thoughts as essential yet.") }}
                            <a href="{{ url_for('main.index') }}" class="alert-link">{{ _("Go to the ranking page to mark thoughts as essential.") }}</a>
                        </div>
                    {% endif %}
                </div>
                
                <div class="tab-pane fade" id="vetoed" role="tabpanel" aria-labelledby="vetoed-tab">
                    {% set vetoed_rankings = rankings|selectattr('vetoed', 'eq', true)|list %}
                    {% if vetoed_rankings %}
                        {% for ranking in vetoed_rankings %}
                            <div class="card thought-card mb-3">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <h5 class="card-title mb-0">{{ ranking.thought.content }}</h5>
                                        <div>
                                            <span class="badge bg-danger">Vetoed</span>
                                        </div>
                                    </div>
                                    <p class="card-text text-muted small">
                                        <i class="fas fa-user"></i> {{ ranking.thought.author.name }} &bull;
                                        <i class="fas fa-calendar"></i> {{ ranking.thought.created_at.strftime('%Y-%m-%d %H:%M') }}
                                    </p>
                                    <div class="mt-2">
                                        <a href="{{ url_for('main.index') }}#thought-{{ ranking.thought.id }}" class="btn btn-sm btn-outline-primary">
                                            <i class="fas fa-edit"></i> Update Ranking
                                        </a>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    {% else %}
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle"></i> {{ _("You haven't vetoed any thoughts yet.") }}
                            <a href="{{ url_for('main.index') }}" class="alert-link">{{ _("Go to the ranking page to veto thoughts.") }}</a>
                        </div>
                    {% endif %}
                </div>
            </div>
        {% else %}
            <div class="alert alert-info">
                <i class="fas fa-info-circle"></i> You haven't ranked any thoughts yet. 
                <a href="{{ url_for('main.index') }}" class="alert-link">Go to the ranking page to start ranking thoughts!</a>
            </div>
        {% endif %}
    </div>
    
    <div class="col-md-4">
        <div class="card shadow-sm">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-info-circle"></i> {{ _("About Your Rankings") }}</h5>
            </div>
            <div class="card-body">
                <p>{{ _("This page shows all the thoughts you've interacted with:") }}</p>
                <ul>
                    <li>{{ _("Thoughts you've ranked (from -10 to +10 points)") }}</li>
                    <li>{{ _("Thoughts you've marked as essential (max 5)") }}</li>
                    <li>{{ _("Thoughts you've vetoed (max 5)") }}</li>
                </ul>
                <p>{{ _("You can update your rankings at any time by clicking the 'Update Ranking' button or visiting the main ranking page.") }}</p>
                
                <div class="d-grid gap-2 mt-3">
                    <a href="{{ url_for('main.index') }}" class="btn btn-primary">
                        <i class="fas fa-list-ol"></i> Go to Ranking Page
                    </a>
                </div>
            </div>
        </div>
        
        <div class="card shadow-sm mt-3">
            <div class="card-header bg-info text-white">
                <h5 class="mb-0"><i class="fas fa-user"></i> {{ _("Your Status") }}</h5>
            </div>
            <div class="card-body">
                <p>
                    <strong>{{ _("Essential thoughts:") }}</strong> 
                    {{ request.current_user.count_essentials() }}/5
                </p>
                <p>
                    <strong>{{ _("Vetoed thoughts:") }}</strong> 
                    {{ request.current_user.count_vetoes() }}/5
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}