{% extends "base.html" %}

{% block styles %}<link rel="stylesheet" href="/static/css/console.css?v=20260729-hosts">{% endblock %}
{% block scripts %}<script src="/static/js/console.js?v=20260729-hosts" defer></script>{% endblock %}

{% block main %}
<main id="main-content" class="console-main" data-console-root data-csrf-token="{{ csrf_token }}">
  <div class="container console-layout">
    {% include "console-navigation.html" %}
    <div class="console-content">
      {% include "console-heading.html" %}
      <p class="console-boundary">
        {% if is_en %}
        The website shows the cloud sync copy only. Upload and download happen only when you explicitly start them in a client; the server never edits local client data.
        {% else %}
        网页只展示云端同步副本。上传和下载仅在你于客户端手动触发时发生，服务器不会修改客户端本地数据。
        {% endif %}
      </p>
      <section class="console-section">
        <div class="console-section-heading"><h2>{% if is_en %}Cloud hosts{% else %}云端主机{% endif %}</h2><span class="console-status">{{ total }}</span></div>
        {% if hosts.is_empty() %}
        <p class="console-empty">{% if is_en %}No hosts have been uploaded.{% else %}尚未上传任何主机。{% endif %}</p>
        {% else %}
        <div class="console-list">
          {% for host in hosts %}
          <article class="console-record">
            <div class="console-record-heading">
              <div><strong>{% if is_en %}Encrypted host{% else %}加密主机{% endif %}</strong><small>{{ host.id }}</small></div>
              <span class="console-status">{% if host.migration_required %}{% if is_en %}Migration required{% else %}需要迁移{% endif %}{% else %}{% if is_en %}Opaque{% else %}不透明密文{% endif %}{% endif %}</span>
            </div>
            <dl class="console-definition-grid console-definition-grid-compact">
              <div><dt>{% if is_en %}Revision{% else %}修订号{% endif %}</dt><dd>{{ host.revision }}</dd></div>
              <div><dt>{% if is_en %}Opaque payload{% else %}不透明载荷{% endif %}</dt><dd>{% if host.secret_present && host.metadata_encrypted %}{% if is_en %}Present{% else %}已保存{% endif %}{% else %}{% if is_en %}Client migration required{% else %}需要客户端迁移{% endif %}{% endif %}</dd></div>
              <div><dt>{% if is_en %}Source device{% else %}来源设备{% endif %}</dt><dd>{{ host.source_device_id }}</dd></div>
              <div><dt>{% if is_en %}Updated{% else %}更新时间{% endif %}</dt><dd>{{ host.updated_at }}</dd></div>
            </dl>
          </article>
          {% endfor %}
        </div>
        {% endif %}
      </section>
    </div>
  </div>
</main>
{% endblock %}