{% extends "base.html" %}

{% block title %}My Votes - Governance Dashboard{% endblock %}

{% block content %}
<!-- Navigation Tabs -->
<div class="row mb-4">
    <div class="col-12">
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link" href="/governance">Dashboard</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/governance/proposals">All Proposals</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" href="/governance/my-votes">My Votes</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/governance/create">Create Proposal</a>
            </li>
        </ul>
    </div>
</div>

<!-- Info Alert -->
<div class="row">
    <div class="col-12">
        <div class="alert alert-info alert-dismissible fade show">
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            <h5><i class="bi bi-info-circle"></i> About Votes</h5>
            <p>Voting is a fundamental right of all token holders in our governance system. Each vote carries weight
                proportional to your token holdings, ensuring fair representation. The voting statistics below show the
                community's collective decision-making across all proposals.</p>
            <div class="mt-2">
                <a href="/governance/voting-guide" class="btn btn-sm btn-outline-primary"><i
                        class="bi bi-check2-square"></i> Voting Guide</a>
            </div>
        </div>
    </div>
</div>

<!-- Voting Stats -->
<div class="row mb-4">
    <div class="col-md-4 mb-3">
        <div class="card text-white bg-success h-100">
            <div class="card-body text-center">
                <h5 class="card-title">Yes Votes</h5>
                <p class="display-4">
                    {{ total_yes_votes }}
                </p>
            </div>
        </div>
    </div>
    <div class="col-md-4 mb-3">
        <div class="card text-white bg-danger h-100">
            <div class="card-body text-center">
                <h5 class="card-title">No Votes</h5>
                <p class="display-4">
                    {{ total_no_votes }}
                </p>
            </div>
        </div>
    </div>
    <div class="col-md-4 mb-3">
        <div class="card text-white bg-secondary h-100">
            <div class="card-body text-center">
                <h5 class="card-title">Abstain Votes</h5>
                <p class="display-4">
                    {{ total_abstain_votes }}
                </p>
            </div>
        </div>
    </div>
</div>

<!-- My Votes List -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">My Voting History</h5>
            </div>
            <div class="card-body">
                {% if votes | length > 0 %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Proposal</th>
                                <th>My Vote</th>
                                <th>Status</th>
                                <th>Voted On</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for item in votes %}{% set vote = item.0 %}{% set proposal = item.1 %}
                            <tr>
                                <td>{{ proposal.title }}</td>
                                <td>
                                    <span
                                        class="badge {% if vote.vote_type == 'Yes' %}bg-success{% elif vote.vote_type == 'No' %}bg-danger{% else %}bg-secondary{% endif %}">
                                        {{ vote.vote_type }}
                                    </span>
                                </td>
                                <td>
                                    <span
                                        class="badge {% if proposal.status == 'Active' %}bg-success{% elif proposal.status == 'Approved' %}bg-primary{% elif proposal.status == 'Rejected' %}bg-danger{% elif proposal.status == 'Draft' %}bg-secondary{% else %}bg-warning{% endif %}">
                                        {{ proposal.status }}
                                    </span>
                                </td>
                                <td>{{ vote.created_at | date(format="%Y-%m-%d") }}</td>
                                <td>
                                    <a href="/governance/proposals/{{ proposal.base_data.id }}"
                                        class="btn btn-sm btn-primary">View Proposal</a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="text-center py-5">
                    <i class="bi bi-clipboard-check fs-1 text-muted mb-3"></i>
                    <h5>You haven't voted on any proposals yet</h5>
                    <p class="text-muted">When you vote on proposals, they will appear here.</p>
                    <a href="/governance/proposals" class="btn btn-primary mt-3">Browse Proposals</a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>


{% endblock %}