{% extends "base.html" %} {% block content %}
<div class="page-header">
  <h1>Config Files: {{ instance_name }}</h1>
  <a href="/instances/{{ instance_id }}/edit" class="btn"
    >&larr; Back to Instance</a
  >
</div>

{% if saved %}
<div class="flash flash-ok">File saved successfully.</div>
{% endif %} {% if let Some(err) = error %}
<div class="flash flash-err">{{ err }}</div>
{% endif %}

<div style="display: flex; gap: 1.5rem; align-items: flex-start">
  {# File list sidebar #}
  <div class="card" style="flex: 0 0 260px; max-height: 70vh; overflow-y: auto">
    <h3 style="margin-bottom: 0.5rem">Files</h3>
    {% if files.is_empty() %}
    <p style="font-size: 0.85rem; color: var(--fg-muted)">
      No config files yet.<br />Start the server to generate them.
    </p>
    {% else %}
    <ul style="list-style: none; padding: 0; margin: 0; font-size: 0.85rem">
      {% for f in files %}
      <li style="padding: 0.25rem 0">
        <a
          href="/instances/{{ instance_id }}/config?path={{ f }}"
          style="{% if selected_file.as_deref() == Some(f) %}font-weight:bold;color:var(--ok){% endif %}"
        >
          {{ f }}
        </a>
      </li>
      {% endfor %}
    </ul>
    {% endif %}
  </div>

  {# Editor area #}
  <div class="card" style="flex: 1">
    {% if let Some(file) = selected_file %}
    <h3 style="margin-bottom: 0.5rem">{{ file }}</h3>
    {% if let Some(content) = content %}
    <form method="post" action="/instances/{{ instance_id }}/config">
      <input type="hidden" name="path" value="{{ file }}" />
      <textarea
        name="content"
        rows="30"
        style="width: 100%; font-family: monospace; font-size: 0.8rem"
        spellcheck="false"
      >
{{ content }}</textarea>
      <div style="margin-top: 0.5rem">
        <button type="submit" class="btn-ok">Save</button>
      </div>
    </form>
    {% else %}
    <p style="color: var(--fg-muted)">Could not load file content.</p>
    {% endif %} {% else %}
    <p style="color: var(--fg-muted)">Select a file from the list to edit.</p>
    {% endif %}
  </div>
</div>
{% endblock %}