{% extends "base.html" %}
{% block title %}{{ poll.title }} - SlotFinder{% endblock %}
{% block bodyclass %}poll-view{% endblock %}
{% block content %}
<div class="poll-page">
    <div id="loading-overlay" class="loading-overlay">
        <div class="loading-spinner"></div>
    </div>
    <header class="poll-header">
        <h1>{{ poll.title }}</h1>
        {% if poll.description %}<p class="poll-desc">{{ poll.description }}</p>{% endif %}
        <div class="participants-section">
            <span class="participants-label">Participants:</span>
            <div id="participants-list" class="participants-list"></div>
            <div id="join-section" class="join-section" style="display:none">
                <button id="join-btn" class="btn btn-primary">Join Poll</button>
            </div>
            <div id="admin-section" class="admin-section" style="display:none;">
                <button id="edit-btn" class="btn btn-small">Edit</button>
                <button id="lock-btn" class="btn btn-small">🔓 Lock</button>
                <button id="delete-btn" class="btn btn-small btn-danger">Delete</button>
            </div>
            <div id="locked-notice" class="locked-notice" style="display:none;">🔒 This poll has been locked by the organizer</div>
        </div>
    </header>

    <!-- Guest join modal -->
    <div id="guest-modal" class="modal-overlay" style="display:none;">
        <div class="modal">
            <button id="guest-modal-close" class="modal-close">&times;</button>
            <h3>Join Poll</h3>
            <p class="modal-subtitle">Enter your name to join, or <a href="{{ url_for('login') }}">sign in</a> instead.</p>
            <div class="modal-form">
                <input type="text" id="guest-display-name" placeholder="Your Name" required>
            </div>
            <div class="modal-actions">
                <span id="guest-modal-error" class="modal-error"></span>
                <button id="guest-modal-join" class="btn btn-primary">Join</button>
            </div>
        </div>
    </div>

    <!-- Edit poll modal -->
    <div id="edit-modal" class="modal-overlay" style="display:none;">
        <div class="modal modal-large">
            <button id="edit-modal-close" class="modal-close">&times;</button>
            <h3>Edit Poll</h3>
            <div class="modal-form">
                <input type="text" id="edit-poll-title" placeholder="Poll Title" required>
                <textarea id="edit-poll-description" placeholder="Description (optional)"></textarea>
                <label class="form-label">Available Dates</label>
                <div class="calendar-nav">
                    <button type="button" id="edit-prev-month">&lt;</button>
                    <span id="edit-month-year"></span>
                    <button type="button" id="edit-next-month">&gt;</button>
                </div>
                <div class="calendar" id="edit-calendar"></div>
                <p class="hint">Click to toggle, Shift+click for range. Removing dates will discard existing responses for those days.</p>
                <label class="checkbox-option">
                    <input type="checkbox" id="edit-allow-anonymous">
                    <span>Allow non-logged in users to view and join</span>
                </label>
            </div>
            <div class="modal-actions">
                <span id="edit-modal-error" class="modal-error"></span>
                <button id="edit-modal-save" class="btn btn-primary">Save Changes</button>
            </div>
        </div>
    </div>

    <div class="poll-content">
        <div class="panel results-panel">
            <table id="results-table">
                <thead>
                    <tr>
                        <th>Time Slot</th>
                        <th>Available</th>
                        <th>
                            <span id="attendees-mode-available" class="attendees-mode-toggle active">Attendees</span>
                            <span class="attendees-mode-separator">/</span>
                            <span id="attendees-mode-unavailable" class="attendees-mode-toggle">Unavailable</span>
                        </th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>

        <div class="panel calendar-panel">
            <div class="panel-header">
                <h2>Select Days <button id="reset-days-btn" class="reset-btn" title="Reset days">&#x21bb;</button></h2>
                <label class="view-switch">
                    <input type="checkbox" id="view-mode-toggle">
                    <span class="switch-slider"></span>
                    <span class="switch-label">View All</span>
                </label>
            </div>
            <div class="calendar-nav">
                <button id="prev-month">&lt;</button>
                <span id="month-year"></span>
                <button id="next-month">&gt;</button>
            </div>
            <div class="calendar" id="calendar"></div>
            <p class="hint"><span class="hint-text" id="hint-text">Ctrl+click to toggle multiple</span><span class="hint-help" id="hint-help" title="Click: Select this day&#10;Ctrl+click: Toggle without clearing&#10;Shift+click: Select range&#10;C: Clear hovered panel&#10;Shift+C: Clear all"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg></span></p>
            <div class="calendar-actions">
                <input type="text" id="note-input" class="note-input" placeholder="Add a note (optional)">
                <button id="submit-btn" class="btn btn-primary" disabled><span class="btn-text">Submit Availability</span><span class="btn-check">✓ Submitted</span></button>
            </div>
        </div>

        <div class="panel time-panel">
            <h2>Select Time <button id="reset-time-btn" class="reset-btn" title="Reset time">&#x21bb;</button></h2>
            <div class="time-grid" id="time-grid"></div>
        </div>

        <div class="panel notes-panel">
            <h2>Notes</h2>
            <div id="notes-pane" class="notes-pane-content">
                <span class="notes-pane-empty">Click a time slot to view notes</span>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/poll.js') }}"></script>
<script>initPoll('{{ poll.id }}', {{ 'true' if current_user.is_authenticated else 'false' }});</script>
{% endblock %}