<!-- bedrock_server_manager//web/templates/select_addon.html -->
{# Extends the base layout template #}
{% extends "base.html" %}

{# --- Page Title Block --- #}
{% block title %}{{ super() }} - Select Addon: {{ server_name }}{% endblock %}

{# --- Main Content Block --- #}
{% block content %}
    {# Main heading for the page #}
<h2>Select Addon to Install</h2>

    {# Display server context #}
<p style="margin-bottom: 15px;">Server: <strong>{{ server_name }}</strong></p>

    {# --- Status Message Area --- #}
    {# Targeted by JavaScript (showStatusMessage) #}
<div id="status-message-area" class="message-box" style="opacity: 0; transition: opacity 0.5s ease-out;">
    <!-- Status messages from install actions will appear here -->
</div>

    {# Server-side flash messages (handled by base.html) #}

    {# Section containing the addon selection list #}
<section id="content-management-page" class="select-addon-section list-section" data-server-name="{{ server_name | e }}">
    {# Use list-section class #}

    {# Check if addon_files list (passed from route) is not empty #}
    {% if addon_files %}
    <p>Select an addon file (.mcaddon or .mcpack) to install to server '{{ server_name }}':</p>

    {# Responsive wrapper for the table #}
    <div class="table-responsive-wrapper">
        <table class="server-table">
            {# Use standard table styling #}
            <thead>
                <tr>
                    <th scope="col">Available Addon File</th> {# Header for the filename #}
                    <th scope="col" style="width: 150px; text-align: center;">Action</th> {# Header for the button #}
                </tr>
            </thead>
            <tbody>
                {# Loop through the list of full addon file paths #}
                {% for addon_file_path in addon_files %}
                <tr>
                    {# Display only the filename part #}
                    {# IMPORTANT: Assumes 'basename' filter is registered #}
                    <td data-label="Addon File">{{ addon_file_path | basename }}</td>
                    {# Cell containing the install button #}
                    <td data-label="Action" style="text-align: center;">
                        <button type="button"
                                class="action-button install-button install-addon-btn"
                                data-server-name="{{ server_name | e }}"
                                data-addon-path="{{ addon_file_path | e | replace('\\', '\\\\') }}">
                            Install
                        </button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div> {# --- End .table-responsive-wrapper --- #}

    {% else %}
    {# Message displayed if no addon files are found #}
    {# Use consistent styling class #}
    <p class="no-servers-message">
        No addon files (.mcaddon, .mcpack) found in the configured content/addons directory.
    </p>
    {% endif %}

    {# --- Navigation Link Back --- #}
    {# Always show the back button #}
    <div class="navigation-link" style="margin-top: 25px;">
        {# Link back to the main dashboard #}
        <a href="{{ request.url_for('index') }}" class="action-link">
            {# Assuming 'index' is the name of the main dashboard route #}
            « Back to Dashboard
        </a>
    </div>

</section> {# --- End .select-addon-section --- #}

{% endblock %}

{% block body_scripts %}
<script src="{{ request.url_for('static', path='js/content_management.js') }}" defer></script>
{% endblock %}