{% extends "base.html" %}

{% block title %}Proposals - Governance Dashboard{% endblock %}

{% block content %}
<!-- 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 %}

<!-- Navigation Tabs -->
<div class="row mb-3">
    <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 active" href="/governance/proposals">All Proposals</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" 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>

<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 Proposals</h5>
        <p>Proposals are formal requests for changes to the platform that require community approval. Each proposal
            includes a detailed description, implementation plan, and voting period. Browse the list below to see all
            active and past proposals.</p>
        <div class="mt-2">
            <a href="/governance/proposal-guidelines" class="btn btn-sm btn-outline-primary"><i
                    class="bi bi-file-text"></i> Proposal Guidelines</a>
        </div>
    </div>
</div>

<!-- Filter Controls -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <form action="/governance/proposals" method="get" class="row g-3">
                    <div class="col-md-4">
                        <label for="status" class="form-label">Status</label>
                        <select class="form-select" id="status" name="status">
                            <option value="" {% if not status_filter or status_filter == "" %}selected{% endif %}>All Statuses</option>
                            <option value="Draft" {% if status_filter == "Draft" %}selected{% endif %}>Draft</option>
                            <option value="Active" {% if status_filter == "Active" %}selected{% endif %}>Active</option>
                            <option value="Approved" {% if status_filter == "Approved" %}selected{% endif %}>Approved</option>
                            <option value="Rejected" {% if status_filter == "Rejected" %}selected{% endif %}>Rejected</option>
                            <option value="Cancelled" {% if status_filter == "Cancelled" %}selected{% endif %}>Cancelled</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="search" class="form-label">Search</label>
                        <input type="text" class="form-control" id="search" name="search"
                            placeholder="Search by title or description" value="{% if search_filter %}{{ search_filter }}{% endif %}">
                    </div>
                    <div class="col-md-2 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary w-100">Filter</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Proposals List -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">All Proposals</h5>
                <a href="/governance/create" class="btn btn-sm btn-primary">Create New Proposal</a>
            </div>
            <div class="card-body">
                {% if proposals and proposals|length > 0 %}
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Title</th>
                                <th>Creator</th>
                                <th>Status</th>
                                <th>Created</th>
                                <th>Voting Period</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for proposal in proposals %}
                            <tr>
                                <td>{{ proposal.title }}</td>
                                <td>{{ proposal.creator_name }}</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>{{ proposal.created_at | date(format="%Y-%m-%d") }}</td>
                                <td>
                                    {% if proposal.voting_starts_at and proposal.voting_ends_at %}
                                    {{ proposal.voting_starts_at | date(format="%Y-%m-%d") }} to {{
                                    proposal.voting_ends_at | date(format="%Y-%m-%d") }}
                                    {% else %}
                                    Not set
                                    {% endif %}
                                </td>
                                <td>
                                    <a href="/governance/proposals/{{ proposal.base_data.id }}"
                                        class="btn btn-sm btn-primary">View</a>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                {% else %}
                <div class="alert alert-info text-center py-5">
                    <i class="bi bi-info-circle fs-1 mb-3"></i>
                    <h5>No proposals found</h5>
                    {% if status_filter or search_filter %}
                    <p>No proposals match your current filter criteria. Try adjusting your filters or <a href="/governance/proposals" class="alert-link">view all proposals</a>.</p>
                    {% else %}
                    <p>There are no proposals in the system yet.</p>
                    {% endif %}
                    <a href="/governance/create" class="btn btn-primary mt-3">Create New Proposal</a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
    </div>
</div>
{% endblock %}