{% extends "base.html" %}
{% import "_macros.html" as macros %}

{% block title %}Server {{ server.name }} | left4me{% endblock %}

{% block content %}
<section class="panel state-cluster">
  <div class="page-heading">
    <h1>Server: {{ server.name }}</h1>
  </div>

  {# Lifecycle subblock — uses _server_actions.html which now opens job-log-modal on click #}
  {% include "_server_actions.html" %}

  {# Live state — HTMX-loaded into innerHTML #}
  <section class="live-state"
           hx-get="/servers/{{ server.id }}/live-state"
           hx-trigger="load, every 5s"
           hx-swap="innerHTML"></section>

  {# Config grid — flat auto-fit; uses config_field_block macro from _macros.html #}
  <div class="config-grid">
    {% call macros.config_field_block("Port") %}
      <a href="steam://run/550//+connect%20{{ connect_host }}:{{ server.port }}">{{ server.port }}</a>
    {% endcall %}

    {% call macros.config_field_block("Blueprint") %}
      {% if blueprint %}
        <a href="/blueprints/{{ blueprint.id }}">{{ blueprint.name }}</a>
      {% else %}
        —
      {% endif %}
    {% endcall %}

    {% call macros.config_field_block("RCON") %}
      <span class="password-mask" data-password-field="{{ server.id }}">••••••••••••</span>
      <span class="password-value" data-password-field="{{ server.id }}" hidden>{{ server.rcon_password }}</span>
      <button class="link-button" data-password-toggle="{{ server.id }}" aria-label="Show RCON password">show</button>
    {% endcall %}

    {% call macros.config_field_block("Hostname", editable=True) %}
      <form method="post" action="/servers/{{ server.id }}" class="inline-save">
        <input type="hidden" name="csrf_token" value="{{ session.get('csrf_token', '') }}">
        <input name="hostname" value="{{ server.hostname }}" placeholder="{{ g.user.username }} {{ server.name }}" maxlength="128">
        <button type="submit">Save</button>
      </form>
    {% endcall %}
  </div>
</section>

{# Inspection strip — Log / Console / Files with expand-to-modal #}
<section class="panel inspection-strip" data-tab-strip data-active-tab="log">
  <div class="tab-bar">
    <button type="button" role="tab" data-tab="log" aria-selected="true">Log</button>
    <button type="button" role="tab" data-tab="console" aria-selected="false">Console</button>
    <button type="button" role="tab" data-tab="files" aria-selected="false">Files</button>
    <button type="button" class="strip-expand" aria-label="Expand active tab">⛶</button>
  </div>

  <div role="tabpanel" data-tab="log" class="tab-pane">
    <pre class="log-stream" data-sse-url="/servers/{{ server.id }}/logs/stream"></pre>
  </div>

  <div role="tabpanel" data-tab="console" class="tab-pane" hidden>
    <div id="console-transcript-inline-{{ server.id }}" class="console-transcript" data-autoscroll>
      {% for h in console_history %}
        {% with command=h.command, reply=h.reply, is_error=h.is_error %}
          {% include "_console_line.html" %}
        {% endwith %}
      {% endfor %}
    </div>
    {{ macros.console_form(server, "console-transcript-inline-" ~ server.id) }}
  </div>

  <div role="tabpanel" data-tab="files" class="tab-pane" hidden>
    {% if not file_tree_root_entries %}
      <p class="muted">No files yet — start the server to mount its runtime.</p>
    {% else %}
      {% set entries = file_tree_root_entries %}
      {% set truncated = file_tree_truncated %}
      {% set truncated_count = file_tree_truncated_count %}
      {% set files_base_url = "/servers/" ~ server.id %}
      {% include "_overlay_file_tree.html" %}
    {% endif %}
  </div>
</section>

<div class="page-footer-actions">
  <button type="button" class="danger-outline" data-inline-modal-open="delete-server-modal">Delete server</button>
  <a href="#" class="link-button" data-inline-modal-open="rename-server-modal">Rename</a>
</div>

{# ===== Modals ===== #}

<dialog id="log-modal" class="modal" aria-labelledby="log-modal-title">
  <div class="modal-header">
    <h2 id="log-modal-title">Server log</h2>
    <button type="button" class="modal-close" data-inline-modal-close aria-label="Close">&times;</button>
  </div>
  <div class="modal-body">
    <pre class="log-stream tall" data-sse-url="/servers/{{ server.id }}/logs/stream"></pre>
  </div>
</dialog>

<dialog id="console-modal" class="modal" aria-labelledby="console-modal-title">
  <div class="modal-header">
    <h2 id="console-modal-title">Console</h2>
    <button type="button" class="modal-close" data-inline-modal-close aria-label="Close">&times;</button>
  </div>
  <div class="modal-body">
    <div id="console-transcript-modal-{{ server.id }}" class="console-transcript tall" data-autoscroll>
      {% for h in console_history %}
        {% with command=h.command, reply=h.reply, is_error=h.is_error %}
          {% include "_console_line.html" %}
        {% endwith %}
      {% endfor %}
    </div>
    {{ macros.console_form(server, "console-transcript-modal-" ~ server.id) }}
  </div>
</dialog>

<dialog id="files-modal" class="modal" aria-labelledby="files-modal-title">
  <div class="modal-header">
    <h2 id="files-modal-title">Files</h2>
    <button type="button" class="modal-close" data-inline-modal-close aria-label="Close">&times;</button>
  </div>
  <div class="modal-body">
    {% if file_tree_root_entries %}
      {% set entries = file_tree_root_entries %}
      {% set truncated = file_tree_truncated %}
      {% set truncated_count = file_tree_truncated_count %}
      {% set files_base_url = "/servers/" ~ server.id %}
      {% include "_overlay_file_tree.html" %}
    {% else %}
      <p class="muted">No files yet — start the server to mount its runtime.</p>
    {% endif %}
  </div>
</dialog>

<dialog id="recent-players-modal" class="modal" aria-labelledby="recent-players-modal-title">
  <div class="modal-header">
    <h2 id="recent-players-modal-title">Recent players</h2>
    <button type="button" class="modal-close" data-inline-modal-close aria-label="Close">&times;</button>
  </div>
  <div class="modal-body">
    {# Re-renders via HTMX when modal first becomes visible (Task 8b adds the ?view=recent-modal branch). #}
    <div hx-get="/servers/{{ server.id }}/live-state?view=recent-modal"
         hx-trigger="revealed"
         hx-swap="innerHTML"></div>
  </div>
</dialog>

<dialog id="job-log-modal" class="modal" aria-labelledby="job-log-modal-title">
  <div class="modal-header">
    <h2 id="job-log-modal-title">Job log</h2>
    <button type="button" class="modal-close" data-inline-modal-close aria-label="Close">&times;</button>
  </div>
  <div class="modal-body">
    {% if latest_job %}
      <pre class="log-stream tall" data-sse-url="/jobs/{{ latest_job.id }}/stream"></pre>
      <p><a href="/jobs/{{ latest_job.id }}">open full job →</a></p>
    {% else %}
      <p class="muted">No job has run for this server yet.</p>
    {% endif %}
  </div>
</dialog>

<dialog id="rename-server-modal" class="modal" aria-labelledby="rename-server-title">
  <div class="modal-header">
    <h2 id="rename-server-title">Rename server</h2>
    <button type="button" class="modal-close" data-inline-modal-close aria-label="Close">&times;</button>
  </div>
  <div class="modal-body">
    <form method="post" action="/servers/{{ server.id }}" class="inline-save">
      <input type="hidden" name="csrf_token" value="{{ session.get('csrf_token', '') }}">
      <input name="name" value="{{ server.name }}" required autofocus>
      <button type="submit">Save</button>
    </form>
  </div>
</dialog>

<dialog id="reset-server-modal" class="modal" aria-labelledby="reset-server-title">
  <div class="modal-header">
    <h2 id="reset-server-title">Reset server "{{ server.name }}"?</h2>
    <button type="button" class="modal-close" data-inline-modal-close aria-label="Close">&times;</button>
  </div>
  <div class="modal-body">
    <p>This stops the server and wipes its runtime state (logs, caches, accumulated game state). The blueprint association is preserved; the next start rebuilds from the current blueprint.</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="button-secondary" data-inline-modal-close>Cancel</button>
    <form method="post" action="/servers/{{ server.id }}/reset" class="inline-form">
      <input type="hidden" name="csrf_token" value="{{ session.get('csrf_token', '') }}">
      <button class="danger" type="submit">Reset</button>
    </form>
  </div>
</dialog>

<dialog id="delete-server-modal" class="modal" aria-labelledby="delete-server-title">
  <div class="modal-header">
    <h2 id="delete-server-title">Delete server "{{ server.name }}"?</h2>
    <button type="button" class="modal-close" data-inline-modal-close aria-label="Close">&times;</button>
  </div>
  <div class="modal-body">
    <p>This stops the server and tears down its runtime files. This cannot be undone.</p>
  </div>
  <div class="modal-footer">
    <button type="button" class="button-secondary" data-inline-modal-close>Cancel</button>
    <form method="post" action="/servers/{{ server.id }}/delete" class="inline-form">
      <input type="hidden" name="csrf_token" value="{{ session.get('csrf_token', '') }}">
      <button class="danger" type="submit">Delete</button>
    </form>
  </div>
</dialog>
{% endblock %}