%# /templates/birthdays.html.ep

% layout 'default';
% title icon('birthdays') . ' Birthdays';

<% content_for head => begin %>
    <link rel="stylesheet" href="/css/birthdays.css">
    <script src="/js/birthdays.js"></script>
<% end %>

<div class="birthday-container">
    <div class="header-bar">
        <h1><%= icon('birthdays') %> <span>Birthdays</span></h1>
        <% if (is_admin()) { %>
            <div class="manage-actions">
                <button class="btn-primary" onclick="openAddModal()"><%= icon('add') %> New</button>
                <button class="btn-secondary" onclick="toggleManageMode()" id="manageBtn"><%= icon('settings') %> Manage</button>
            </div>
        <% } %>
    </div>

    <!-- Main Countdown View -->
    <div id="birthday-grid" class="birthdays-grid">
        <div class="loading-state">
            <div class="spinner"></div>
            <p>Loading birthdays...</p>
        </div>
    </div>

    <!-- Administrative Management View (Restricted) -->
    <% if (is_admin()) { %>
        <div id="manage-view" class="manage-view glass-panel" style="display: none;">
            <div class="manage-header">
                <h2>Manage Records</h2>
                <button class="btn-close" onclick="toggleManageMode()">&times;</button>
            </div>
            <div id="manage-list" class="manage-list">
                <!-- Populated by JS -->
            </div>
        </div>
    <% } %>
</div>

<% if (is_admin()) { %>
<!-- Add/Edit Modal -->
<div id="birthdayModal" class="modal-overlay">
    <div class="modal-content modal-content-small">
        <div class="modal-header">
            <h3 id="modalTitle">Add Birthday</h3>
            <span class="close-btn" onclick="closeModal()">&times;</span>
        </div>
        <form id="birthdayForm" onsubmit="submitBirthdayForm(event)">
            <input type="hidden" name="id" id="field_id">
            <div class="modal-body">
                <div class="form-group">
                    <label>Name</label>
                    <input type="text" name="name" id="field_name" class="game-input" required placeholder="e.g. Robert">
                </div>
                
                <div class="form-group">
                    <label>Birth Date</label>
                    <input type="date" name="birth_date" id="field_date" class="game-input" required>
                </div>
            </div>
            <div class="modal-actions">
                <button type="submit" class="btn-primary" id="submitBtn">Save Birthday</button>
            </div>
        </form>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div id="deleteConfirmModal" class="delete-modal-overlay">
    <div class="delete-modal-content">
        <div class="delete-modal-header">
            <h3>Confirm Deletion</h3>
            <span class="delete-modal-close" onclick="closeDeleteModal()">&times;</span>
        </div>
        <div class="delete-modal-body">
            <p>Are you sure you want to remove "<strong id="deleteName"></strong>"?</p>
        </div>
        <div class="delete-modal-actions">
            <form id="deleteForm" onsubmit="submitDeleteForm(event)">
                <input type="hidden" name="id" id="deleteId">
                <button type="submit" class="btn-danger-confirm">Delete Birthday</button>
            </form>
        </div>
    </div>
</div>
<% } %>