{% extends "base.html" %}

{% block title %}Edit Site{% endblock %}

{% block content %}
<h2>Edit {{ site.name }}</h2>
<a href="{{ url_for('main.serve_site_content', subdomain=site.subdomain) }}" class="btn" target="_blank">View Site</a>

<div style="margin-bottom: 30px;"></div>

<label for="theme-selector">Select Theme:</label>
<select id="theme-selector" style="width: 200px;">
    <!-- Theme options will be populated here -->
</select>

<form method="POST">
    <div class="form-group">
        <label>Site Name:</label>
        <input type="text" name="name" value="{{ site.name }}">
    </div>

	<div class="form-group">
        <label>Files:</label>
        <ul id="file-list" class="file-grid" style="padding-left: 0; list-style: none;">
            {% for filename, content in files.items() %}
            <li class="file-card" style="cursor: pointer;" data-index="{{ loop.index0 }}" data-file="{{ filename }}">
                <div class="file-icon {% if filename.endswith('.html') %}html{% elif filename.endswith('.css') %}css{% elif filename.endswith('.js') %}js{% endif %}"></div>
                <span class="file-name">{{ filename }}</span>
            </li>
            {% endfor %}
        </ul>
    </div>

    <!-- Hidden textareas to retain file content (one per file) -->
    {% for filename, content in files.items() %}
        <textarea hidden name="{{ filename }}" id="textarea-{{ loop.index0 }}" data-filename="{{ filename }}">{{ content|trim }}</textarea>
    {% endfor %}

    <!-- Ace Editor Container -->
    <div id="editor-container" style="width: 100%; height: 400px; border: 1px solid #ddd; margin-top: 20px;"></div>

    <button type="submit" class="btn" style="margin-top:20px;">Save Changes</button>
</form>

<!-- Ace Editor -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.14/ext-themelist.js"></script>

<!-- Select2 -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<script src="{{ url_for('static', filename='editor.js') }}"></script>

<style>
    /* Style for the Select2 dropdown */
    .select2-container {
        margin-bottom: 10px;
    }
</style>

{% endblock %}