{% extends 'base.html' %}
{% block title %}Administration{% endblock title %}
{% block stylesheet %}
    <link rel="stylesheet" href="{{ url_for('admin.static', filename='administration.css') }}">
{% endblock stylesheet %}
{% block content %}
<main>
    <div class="container my-4 px-5">
        <h2 class="text-center">Users</h2>
        
        <table class="table table-bordered table-striped">
            <thead class="table-dark">
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                    <th>Is Admin?</th>
                    <th>Change Admin Status</th>
                </tr>
            </thead>
            <tbody>
                {% for user in users %}
                <tr>
                    <td>{{user.id}}</td>
                    <td>{{user.first_name}}</td>
                    <td>{{user.last_name}}</td>
                    <td>{{user.email}}</td>
                    <td id="{{user.id}}-admin-status">{% if user.user_type == 'Admin' %}True{%else%}False{%endif%}</td>
                    <td>
                        <label class="switch">
                            <input 
                            type="checkbox" 
                            value="{{user.id}}" 
                            id="admin-checkbox-{{user.id}}" 
                            class="change-admin-btn" 
                            {%if user.user_type == 'Admin'%}checked{%endif%}>
                            <span class="slider round"></span>
                        </label>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <div class="container my-4 px-5">
        <div class="d-flex justify-content-center align-items-center">
            <h2 class="me-3">Campaigns</h2>
            <a href="{{url_for('campaigns.add_campaign')}}" class="btn btn-primary">New Campaign</a>
        </div>
        <table class="table table-bordered table-striped">
            <thead class="table-dark">
                <tr>
                    <th>#</th>
                    <th>Title</th>
                    <th>Active</th>
                    <th>Change Active Status</th>
                    <th>Archive?</th>
                </tr>
            </thead>
            <tbody>
                {% for campaign in campaigns %}
                    <tr id="{{campaign.id}}-row" >
                        <td>{{campaign.id}}</td>
                        <td>{{campaign.title}}</td>
                        <td id="{{campaign.id}}-active-status">{{campaign.active}}</td>
                        <td>
                            <label class="switch">
                                <input 
                                type="checkbox" 
                                value="{{campaign.id}}" 
                                id="active-checkbox-{{campaign.id}}" 
                                class="change-activity-btn" 
                                {%if campaign.active%}checked{%endif%}>
                                <span class="slider round"></span>
                            </label>
                        </td>
                        <td><button 
                            id="archive-button-{{campaign.id}}" 
                            value="{{campaign.id}}" 
                            class="archive-button btn btn-primary">Click to archive</button></td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</main>
<script src="{{url_for('.static', filename='admin.js')}}"></script>
{% endblock content %}