{% extends "base.html" %}

{% set active_page = "edit" %}

{% block title %}HAProxy • Configuration Editor{% endblock %}

{% block breadcrumb %}
<nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb mb-0">
        <li class="breadcrumb-item"><a href="{{ url_for('main.index') }}"><i class="bi bi-house"></i></a></li>
        <li class="breadcrumb-item active" aria-current="page">Edit Configuration</li>
    </ol>
</nav>
{% endblock %}

{% block content %}

<!-- CodeMirror CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/material-darker.min.css">

{% if check_output %}
<div class="alert alert-{{ check_level|default('info') }} alert-dismissible fade show" role="alert">
    <i class="bi bi-{% if check_level == 'success' %}check-circle{% elif check_level == 'danger' %}exclamation-circle{% elif check_level == 'warning' %}exclamation-triangle{% else %}info-circle{% endif %} me-2"></i>
    <strong>
        {% if check_level == 'success' %}Configuration Saved
        {% elif check_level == 'danger' %}Configuration Error
        {% elif check_level == 'warning' %}Warning
        {% else %}Information{% endif %}
    </strong>
    <div class="mt-2 small" style="font-family: monospace; background-color: rgba(0,0,0,0.1); padding: 10px; border-radius: 4px; max-height: 250px; overflow-y: auto; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word;">{{ check_output }}</div>
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endif %}

<!-- Editor Section -->
<div class="card shadow-sm mb-4">
    <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
        <div>
            <h5 class="mb-0"><i class="bi bi-pencil-square me-2"></i>HAProxy Configuration Editor</h5>
        </div>
        <small class="text-white-50">Real-time editor with syntax highlighting</small>
    </div>
    
    <div class="card-body" style="padding: 0;">
        <form method="post" id="edit_form">
            <!-- Editor Container -->
            <div style="border-bottom: 1px solid #dee2e6;">
                <textarea id="haproxy_editor" name="haproxy_config" style="display: none;">{{ config_content }}</textarea>
                <!-- Fallback textarea (hidden by default) -->
                <textarea id="haproxy_config" name="haproxy_config" style="display: none; width: 100%; border: none; font-family: monospace; font-size: 13px; resize: none; padding: 12px; min-height: 500px; background: #1e1e1e; color: #e8e8e8;"></textarea>
            </div>
            
            <!-- Toolbar -->
            <div class="p-3 bg-dark d-flex justify-content-between align-items-center flex-wrap gap-2" style="border-top: 1px solid #444;">
                <div class="d-flex gap-2">
                    <button type="submit" class="btn btn-success btn-sm" name="action" value="check">
                        <i class="bi bi-check-circle me-1"></i>Validate Configuration
                    </button>
                    <button type="submit" class="btn btn-primary btn-sm" name="action" value="save">
                        <i class="bi bi-save me-1"></i>Save & Restart HAProxy
                    </button>
                    <a href="{{ url_for('main.index') }}" class="btn btn-secondary btn-sm">
                        <i class="bi bi-arrow-left me-1"></i>Cancel
                    </a>
                </div>
                <small class="text-muted" style="color: #aaa !important;">
                    <i class="bi bi-info-circle me-1"></i>
                    <span id="line_col">Line 1, Col 1</span> | 
                    <span id="char_count">0</span> characters
                </small>
            </div>
        </form>
    </div>
</div>

<!-- CodeMirror JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/nginx/nginx.min.js"></script>

<!-- Editor JS -->
<script src="{{ url_for('static', filename='js/editor.js') }}"></script>
{% endblock %}