{% extends "base.html" %}
{% block content %}
<h1>Boxes</h1>
<p>Pick a box to browse and open a terminal. Hosts are imported from your SSH config and any custom boxes you add here.</p>
<ul class="cards">
  {% for box in configuration.boxes %}
  <li class="card {% if box.source == 'local' %}local-card{% elif box.source == 'ssh_config' %}ssh-card{% else %}custom-card{% endif %}">
    <div class="title">{{ box.name }}</div>
    {% if box.source == 'local' %}
    <div class="mono">{{ box.user }}@{{ box.display_host }}</div>
    <div class="muted small">Local workspace</div>
    {% else %}
    <div class="mono">{{ box.user }}@{{ box.display_host }} :{{ box.port }}</div>
    <div class="muted small">{{ 'From SSH config' if box.source == 'ssh_config' else 'Custom box' }}</div>
    {% endif %}
    {% if box.resolved_host and box.resolved_host != box.display_host %}
    <div class="muted tiny">resolves to {{ box.resolved_host }}</div>
    {% endif %}
    {% if box.favorites %}
    <details class="favlist">
      <summary class="favorite-toggle">Favorites</summary>
      <ul>
        {% for favorite in box.favorites %}
        <li><a href="/term?host={{ box.name }}&dir={{ favorite|urlencode }}" target="_blank" rel="noopener">{{ favorite }}</a></li>
        {% endfor %}
      </ul>
    </details>
    {% endif %}
    <div class="actions">
      <a class="btn" href="/box/{{ box.name }}">Open</a>
      {% if box.default_dir %}
      <a class="btn secondary" href="/term?host={{ box.name }}&dir={{ box.default_dir|urlencode }}">Terminal</a>
      {% endif %}
      {% if box.source == 'ssh_config' %}
      <button class="btn secondary small"
              hx-post="/box/{{ box.name }}/refresh"
              hx-swap="none"
              hx-on::after-request="window.location.reload()">
        Refresh
      </button>
      {% endif %}
    </div>
  </li>
  {% endfor %}
</ul>

<div class="muted small">Config file: {{ configuration_path if configuration_path else "" }}</div>
{% endblock %}