<!-- bedrock_server_manager//web/templates/install.html -->
{% extends "base.html" %}

{# Set the page title #}
{% block title %}{{ super() }} - Install New Server{% endblock %}

{# Main content for this page #}
{% block content %}
<div id="setup-banner-container"></div>

    {# Page Heading #}
<h2>Install New Bedrock Server</h2>

    {# Area for JavaScript-driven status messages #}
<div id="status-message-area" style="min-height: 1.5em; margin-bottom: 15px;">
    <!-- Status messages from install actions will appear here -->
</div>

    {# Area for JavaScript-driven validation errors #}
<div id="validation-error-area" class="message-box message-error" style="margin-bottom: 15px; display: none;">
    <!-- Overall validation errors will appear here -->
</div>

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

<section id="install-config-page" class="install-config-section">
    {# No <form>
        tag needed if using JS onclick, otherwise wrap form groups #}

        <div class="form-group">
            <label for="install-server-name" class="form-label">Server Name:</label>
            <input type="text" id="install-server-name" name="server_name" class="form-input" value="{{ server_name or '' }}" required>
            <small class="form-help-text">Folder name for the server. No spaces or special chars like ';'.</small>
            <div class="validation-error" data-field="server_name"></div>
        </div>

        <div class="form-group">
            <label for="install-server-version" class="form-label">Server Version:</label>
            <input type="text" id="install-server-version" name="server_version" class="form-input" value="{{ server_version or 'LATEST' }}" required>
            <small class="form-help-text">E.g., LATEST, PREVIEW, CUSTOM, or a specific version like 1.21.0.03</small>
            <div class="validation-error" data-field="server_version"></div>
        </div>

        <div id="custom-zip-selector-group" class="form-group" style="display: none;">
            <label class="form-label">Custom Server ZIP:</label>
            <div id="custom-zip-list" class="radio-group">
                <!-- Radio buttons will be populated by JavaScript -->
            </div>
            <input type="hidden" id="custom-zip-path" name="server_zip_path">
            <small class="form-help-text">Select a custom server ZIP file from the downloads/custom directory.</small>
            <div class="validation-error" data-field="server_zip_path"></div>
        </div>

        {# Form Actions / Navigation #}
        <div class="form-actions">
            <button type="button" id="install-server-btn" class="action-button">Install Server</button>
            {# Use main-button style for primary navigation back #}
            <a href="{{ request.url_for('index') if request else '/' }}" class="action-button">Cancel</a>
        </div>
</section> {# End .install-config-section #}

{% endblock %}