{% extends "base.html" %}

{% block title %}{{ proposal.title }} - Governance Proposal{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="/governance">Governance</a></li>
                    <li class="breadcrumb-item"><a href="/governance/proposals">Proposals</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ proposal.title }}</li>
                </ol>
            </nav>
        </div>
    </div>

    <!-- Success message if present -->
    {% if success %}
    <div class="row mb-4">
        <div class="col-12">
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ success }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        </div>
    </div>
    {% endif %}

    <!-- Proposal Details -->
    <div class="row mb-4">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0">{{ proposal.title }}</h4>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-3">
                        <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 %} p-2">
                            {{ proposal.status }}
                        </span>
                        <small class="text-muted">Created by {{ proposal.creator_name }}
                            <!-- on {{ proposal.created_at | date(format="%Y-%m-%d") }} --></small>
                    </div>

                    <h5>Description</h5>
                    <p class="mb-4">{{ proposal.description }}</p>

                    <h5>Voting Period</h5>
                    <p>
                        {% if proposal.voting_starts_at and proposal.voting_ends_at %}
                        <strong>Start:</strong> {{ proposal.voting_starts_at | date(format="%Y-%m-%d") }} <br>
                        <strong>End:</strong> {{ proposal.voting_ends_at | date(format="%Y-%m-%d") }}
                        {% else %}
                        Not set
                        {% endif %}
                    </p>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Voting Results</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        {% set yes_percent = 0 %}
                        {% set no_percent = 0 %}
                        {% set abstain_percent = 0 %}

                        {% if results.total_votes > 0 %}
                        {% set yes_percent = (results.yes_count * 100 / results.total_votes) | int %}
                        {% set no_percent = (results.no_count * 100 / results.total_votes) | int %}
                        {% set abstain_percent = (results.abstain_count * 100 / results.total_votes) | int %}
                        {% endif %}

                        <p class="mb-1">Yes: {{ results.yes_count }} ({{ yes_percent }}%)</p>
                        <div class="progress mb-3">
                            <div class="progress-bar bg-success" role="progressbar" style="width: {{ yes_percent }}%">
                            </div>
                        </div>

                        <p class="mb-1">No: {{ results.no_count }} ({{ no_percent }}%)</p>
                        <div class="progress mb-3">
                            <div class="progress-bar bg-danger" role="progressbar" style="width: {{ no_percent }}%">
                            </div>
                        </div>

                        <p class="mb-1">Abstain: {{ results.abstain_count }} ({{ abstain_percent }}%)</p>
                        <div class="progress mb-3">
                            <div class="progress-bar bg-secondary" role="progressbar"
                                style="width: {{ abstain_percent }}%"></div>
                        </div>
                    </div>
                    <p class="text-center"><strong>Total Votes:</strong> {{ results.total_votes }}</p>
                </div>
            </div>

            <!-- Vote Form -->
            {% if proposal.status == "Active" and user and user.id %}
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Cast Your Vote</h5>
                </div>
                <div class="card-body">
                    <form action="/governance/proposals/{{ proposal.id }}/vote" method="post">
                        <div class="mb-3">
                            <label class="form-label">Vote Type</label>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="vote_type" id="voteYes" value="Yes"
                                    checked>
                                <label class="form-check-label" for="voteYes">
                                    Yes - I support this proposal
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="vote_type" id="voteNo" value="No">
                                <label class="form-check-label" for="voteNo">
                                    No - I oppose this proposal
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="vote_type" id="voteAbstain"
                                    value="Abstain">
                                <label class="form-check-label" for="voteAbstain">
                                    Abstain - I choose not to vote
                                </label>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="comment" class="form-label">Comment (Optional)</label>
                            <textarea class="form-control" id="comment" name="comment" rows="3"
                                placeholder="Explain your vote..."></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary w-100">Submit Vote</button>
                    </form>
                </div>
            </div>
            {% elif not user or not user.id %}
            <div class="card">
                <div class="card-body text-center">
                    <p>You must be logged in to vote.</p>
                    <a href="/login" class="btn btn-primary">Login to Vote</a>
                </div>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- Votes List -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">Votes ({{ votes | length }})</h5>
                </div>
                <div class="card-body">
                    {% if votes | length > 0 %}
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>Voter</th>
                                    <th>Vote</th>
                                    <th>Comment</th>
                                    <th>Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for vote in votes %}
                                <tr>
                                    <td>{{ vote.voter_name }}</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>{% if vote.comment %}{{ vote.comment }}{% else %}No comment{% endif %}</td>
                                    <td>{{ vote.created_at | date(format="%Y-%m-%d %H:%M") }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    {% else %}
                    <p class="text-center">No votes have been cast yet.</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}