{{define "content"}}
<h1>What's New Management</h1>

{{if .Error}}
<div class="alert alert-error">{{.Error}}</div>
{{end}}

<details {{if .PreviewMode}}open{{end}}>
    <summary><strong>Add New Entry</strong></summary>
    <form hx-post="/whats-new/add" hx-target="this" hx-swap="outerHTML" class="entry-form">
        <div class="form-row">
            <label>
                Date
                <input type="date" name="date" value="{{if .PreviewMode}}{{.PreviewEntry.Date}}{{end}}" required>
            </label>
            <label>
                Category
                <select name="category" required>
                    <option value="feature" {{if eq .PreviewEntry.Category "feature"}}selected{{end}}>Feature</option>
                    <option value="improvement" {{if eq .PreviewEntry.Category "improvement"}}selected{{end}}>Improvement</option>
                    <option value="fix" {{if eq .PreviewEntry.Category "fix"}}selected{{end}}>Fix</option>
                    <option value="content" {{if eq .PreviewEntry.Category "content"}}selected{{end}}>Content</option>
                </select>
            </label>
        </div>
        <label>
            Title
            <input type="text" name="title" placeholder="Short headline (e.g., 'Bug Reporting')" value="{{.PreviewEntry.Title}}" required>
        </label>
        <label>
            Description
            <textarea name="description" rows="3" placeholder="1-2 sentence player-friendly description" required>{{.PreviewEntry.Description}}</textarea>
        </label>
        <button type="submit">Add Entry</button>
    </form>
</details>

<h2>Existing Entries</h2>
<p class="entry-count">{{len .Entries}} entries | <a href="https://assets.eagle0.net/whats-new.json" target="_blank">View JSON</a></p>

<table class="whats-new-table">
    <thead>
        <tr>
            <th>Date</th>
            <th>Category</th>
            <th>Title</th>
            <th>Description</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody id="entries-body">
        {{range .Entries}}
        <tr id="entry-{{.ID}}">
            <td>{{.Date}}</td>
            <td><span class="category category-{{.Category}}">{{.Category}}</span></td>
            <td>{{.Title}}</td>
            <td>{{.Description}}</td>
            <td class="actions">
                <button class="btn-small" onclick="editEntry('{{.ID}}', '{{.Date}}', '{{.Title}}', '{{.Description}}', '{{.Category}}')">Edit</button>
                <button class="btn-small secondary" hx-post="/whats-new/delete/{{.ID}}" hx-target="#entry-{{.ID}}" hx-swap="outerHTML" hx-confirm="Delete this entry?">Delete</button>
            </td>
        </tr>
        {{else}}
        <tr>
            <td colspan="5" class="empty-state">No entries yet. Add your first one above!</td>
        </tr>
        {{end}}
    </tbody>
</table>

<!-- Edit Dialog -->
<dialog id="edit-dialog">
    <article>
        <h3>Edit Entry</h3>
        <form id="edit-form" hx-swap="outerHTML">
            <input type="hidden" id="edit-id" name="id">
            <div class="form-row">
                <label>
                    Date
                    <input type="date" id="edit-date" name="date" required>
                </label>
                <label>
                    Category
                    <select id="edit-category" name="category" required>
                        <option value="feature">Feature</option>
                        <option value="improvement">Improvement</option>
                        <option value="fix">Fix</option>
                        <option value="content">Content</option>
                    </select>
                </label>
            </div>
            <label>
                Title
                <input type="text" id="edit-title" name="title" required>
            </label>
            <label>
                Description
                <textarea id="edit-description" name="description" rows="3" required></textarea>
            </label>
            <footer>
                <button type="button" class="secondary" onclick="closeEditDialog()">Cancel</button>
                <button type="submit">Save Changes</button>
            </footer>
        </form>
    </article>
</dialog>

<style>
details > summary {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--pico-primary-background);
    color: var(--pico-primary-inverse);
    border-radius: var(--pico-border-radius);
    cursor: pointer;
    font-weight: 500;
    margin-bottom: 1rem;
    list-style: none;
}

details > summary::-webkit-details-marker {
    display: none;
}

details > summary:hover {
    background: var(--pico-primary-hover-background);
}

details[open] > summary {
    margin-bottom: 0.5rem;
}

.entry-form {
    background: var(--pico-card-background-color);
    padding: 1rem;
    border-radius: var(--pico-border-radius);
    margin-bottom: 1rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.whats-new-table {
    width: 100%;
}

.whats-new-table td {
    vertical-align: top;
}

.category {
    display: inline-block;
    padding: 0.2em 0.5em;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 500;
}

.category-feature {
    background: #fef3c7;
    color: #92400e;
}

.category-improvement {
    background: #d1fae5;
    color: #065f46;
}

.category-fix {
    background: #dbeafe;
    color: #1e40af;
}

.category-content {
    background: #ede9fe;
    color: #5b21b6;
}

.actions {
    white-space: nowrap;
}

.actions button {
    margin-right: 0.25rem;
}

.entry-count {
    color: var(--pico-muted-color);
    font-size: 0.9em;
    margin-bottom: 0.5rem;
}

.empty-state {
    text-align: center;
    color: var(--pico-muted-color);
    padding: 2rem;
}

#edit-dialog article {
    max-width: 500px;
}

#edit-dialog footer {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}
</style>

<script>
function editEntry(id, date, title, description, category) {
    document.getElementById('edit-id').value = id;
    document.getElementById('edit-date').value = date;
    document.getElementById('edit-title').value = title;
    document.getElementById('edit-description').value = description;
    document.getElementById('edit-category').value = category;

    const form = document.getElementById('edit-form');
    form.setAttribute('hx-post', '/whats-new/edit/' + id);
    form.setAttribute('hx-target', '#entry-' + id);
    htmx.process(form);

    document.getElementById('edit-dialog').showModal();
}

function closeEditDialog() {
    document.getElementById('edit-dialog').close();
}

// Close dialog after successful edit
document.body.addEventListener('htmx:afterRequest', function(evt) {
    if (evt.detail.pathInfo.requestPath.startsWith('/whats-new/edit/')) {
        if (evt.detail.successful) {
            closeEditDialog();
        }
    }
});
</script>
{{end}}