{% extends "base.html" %}

{% block content %}
<div class="columns">
    <div class="column is-3">
        <aside class="menu">
            <p class="menu-label">Administration</p>
            <ul class="menu-list">
                <li><a href="{{ url_for('admin.dashboard') }}">Dashboard</a></li>
                <li><a href="{{ url_for('admin.user_search') }}">User Search</a></li>
                <li><a>Players</a></li>
                <li><a>Bans</a></li>
                <li><a href="{{ url_for('admin.event_settings') }}" class="is-active">Event Settings</a></li>
            </ul>
        </aside>
    </div>
    <div class="column">
        <h1 class="title">Event Logging Settings</h1>
        {% if success %}
        <div class="notification is-success">
            Settings saved successfully! Plugin updated.
        </div>
        {% endif %}

        {% if not configs %}
        <div class="notification is-warning">
            No events found. Please start the Minecraft server and wait for it to connect to populate this list.
        </div>
        {% else %}
        <form method="POST">
            <div class="tabs is-boxed is-small" style="flex-wrap: wrap;">
                <ul id="package-tabs">
                    {% for package in configs.keys() %}
                    <li class="{% if loop.first %}is-active{% endif %}" data-tab="{{ package }}">
                        <a>{{ package|replace('org.bukkit.event.', '') }}</a>
                    </li>
                    {% endfor %}
                </ul>
            </div>

            <div id="tab-content">
                {% for package, events in configs.items() %}
                <div class="content-tab {% if not loop.first %}is-hidden{% endif %}" data-content="{{ package }}">
                    <table class="table is-fullwidth is-striped">
                        <thead>
                            <tr>
                                <th>Event Name</th>
                                <th>Logging Enabled</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for config in events %}
                            <tr>
                                <td>
                                    <strong>{{ config.event_name.split('.')[-1] }}</strong><br>
                                    <small class="has-text-grey">{{ config.event_name }}</small>
                                </td>
                                <td>
                                    <label class="switch">
                                        <input type="checkbox" name="{{ config.event_name }}" {% if config.is_enabled
                                            %}checked{% endif %}>
                                        <span class="slider round"></span>
                                        <!-- You might need CSS for this or use standard checkbox -->
                                        Enable
                                    </label>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% endfor %}
            </div>

            <div class="field is-grouped is-grouped-right"
                style="position: sticky; bottom: 20px; background: #222; padding: 10px; border-radius: 5px;">
                <div class="control">
                    <button class="button is-primary">Save Changes</button>
                </div>
            </div>
        </form>
        {% endif %}
    </div>
</div>

<style>
    /* Basic Switch CSS if not using a library */
    /* Adjust as needed or use standard checkbox */
</style>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const tabs = document.querySelectorAll('#package-tabs li');
        const contents = document.querySelectorAll('.content-tab');

        tabs.forEach(tab => {
            tab.addEventListener('click', () => {
                // Remove active from all tabs
                tabs.forEach(t => t.classList.remove('is-active'));
                // Add active to clicked
                tab.classList.add('is-active');

                // Hide all contents
                contents.forEach(c => c.classList.add('is-hidden'));
                // Show target content
                const target = tab.dataset.tab;
                document.querySelector(`.content-tab[data-content="${target}"]`).classList.remove('is-hidden');
            });
        });
    });
</script>
{% endblock %}