{% extends "base.html" %}

{% block title %}Calling Team Roster - Eventology{% endblock %}

{% block content %}
<div class="flex-between">
    <div>
        <h1>Calling Team Roster</h1>
        <p>Provision caller credentials and manage tele-outreach team members.</p>
    </div>
</div>

<div class="grid-cols-2">
    <!-- List of Callers -->
    <div class="card">
        <div class="card-header">
            <h2 class="card-title">Registered Callers</h2>
            <span class="badge badge-info">{{ callers|length }} Active</span>
        </div>
        
        <div class="table-container">
            <table>
                <thead>
                    <tr>
                        <th>Username</th>
                        <th>Created Date</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% if callers %}
                        {% for caller in callers %}
                        <tr>
                            <td>
                                <strong>{{ caller.username }}</strong>
                            </td>
                            <td>{{ caller.created_at|dateformat }}</td>
                            <td>
                                {% if caller.status == 'approved' %}
                                    <span class="badge badge-success">Active</span>
                                {% else %}
                                    <span class="badge badge-danger">Blocked</span>
                                {% endif %}
                            </td>
                        </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="3" style="text-align: center; color: var(--text-muted); padding: 2rem;">
                                No calling accounts registered. Use the panel on the right to create one.
                            </td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>

    <!-- Create Caller Form -->
    <div class="card">
        <h2 class="mb-1">Provision Call Account</h2>
        <p class="mb-1" style="font-size: 0.9rem;">Created callers can immediately log in to see their assignments and update guest RSVP responses.</p>
        
        <form action="{{ url_for('emc.callers') }}" method="POST">
            <div class="form-group">
                <label for="caller-username">Choose Caller Username</label>
                <input type="text" id="caller-username" name="username" class="form-control" placeholder="e.g. caller_mike" required>
            </div>
            
            <div class="form-group" style="margin-bottom: 1.5rem;">
                <label for="caller-password">Temporary Password</label>
                <input type="password" id="caller-password" name="password" class="form-control" placeholder="••••••••" required>
            </div>
            
            <button type="submit" class="btn btn-primary" style="width: 100%;">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><line x1="19" y1="8" x2="19" y2="14"></line><line x1="22" y1="11" x2="16" y2="11"></line></svg>
                <span>Generate Caller Account</span>
            </button>
        </form>
    </div>
</div>
{% endblock %}