{% extends "admin/layout.html" %}

{% block admin_title %}{{ t.nav_debug }}{% endblock admin_title %}

{% block content %}
<style>
    .cfg-key { position: relative; display: inline-flex; align-items: center; gap: .35rem; }
    .cfg-info-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 16px; height: 16px; border-radius: 50%;
        background: #ccc; color: #fff; font-size: 11px; font-weight: 700;
        cursor: help; flex-shrink: 0; line-height: 1;
    }
    .cfg-info-btn:hover { background: #888; }
    .cfg-popup {
        position: absolute; left: 100%; top: 50%;
        transform: translateY(-50%); z-index: 10;
        background: #1a1a2e; color: #eee; padding: .55rem .75rem;
        border-radius: 6px; box-shadow: 0 4px 16px rgba(0,0,0,.25);
        font-size: .8rem; white-space: nowrap; min-width: 220px;
        margin-left: 8px;
        opacity: 0; visibility: hidden; pointer-events: none;
        transition: opacity .15s, visibility 0s .3s;
        user-select: text;
    }
    /* invisible bridge so cursor can travel from icon to popup */
    .cfg-popup::before {
        content: ''; position: absolute; right: 100%; top: 0; bottom: 0;
        width: 12px;
    }
    .cfg-key:hover .cfg-popup {
        opacity: 1; visibility: visible; pointer-events: auto;
        transition: opacity .15s, visibility 0s;
    }
    .cfg-popup dt { color: #999; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; margin-top: .35rem; }
    .cfg-popup dt:first-child { margin-top: 0; }
    .cfg-popup dd { margin: .1rem 0 0; }
    .cfg-popup code { background: rgba(255,255,255,.12); color: #fff; padding: .05rem .3rem; border-radius: 3px; font-size: .8rem; }
</style>

<h1>{{ t.debug_heading }}</h1>

<h2>{{ t.debug_build_info }}</h2>
<table>
    <tr><th>{{ t.debug_field }}</th><th>{{ t.debug_value }}</th></tr>
    <tr><td>Package</td><td><code>{{ build.pkg_name }}</code></td></tr>
    <tr><td>Version</td><td><code>{{ build.pkg_version }}</code></td></tr>
    <tr><td>Profile</td><td><code>{{ build.profile }}</code></td></tr>
    <tr><td>Target</td><td><code>{{ build.target }}</code></td></tr>
    <tr><td>Rustc</td><td><code>{{ build.rustc_version }}</code></td></tr>
    <tr><td>{{ t.debug_db_status }}</td><td><code>{{ db_status }}</code></td></tr>
</table>

<h2>{{ t.debug_app_config }}</h2>
<table>
    <tr>
      <th>{{ t.debug_field }}</th>
      <th>{{ t.debug_value }}</th>
      <th>{{ t.debug_source }}</th>
    </tr>
    {% for entry in config_entries %}
    <tr>
      <td>
        <span class="cfg-key">
          <code>{{ entry.key }}</code>
          <span class="cfg-info-btn">i</span>
          <dl class="cfg-popup">
            <dt>env var</dt>
            <dd><code>{{ entry.env_var }}</code></dd>
            <dt>default</dt>
            <dd><code>{% if entry.default_value == "" %}(empty){% else %}{{ entry.default_value }}{% endif %}</code></dd>
            <dt>source</dt>
            <dd><code>{{ entry.source }}</code></dd>
          </dl>
        </span>
      </td>
      <td><code>{{ entry.value }}</code></td>
      <td><span class="badge badge-{{ entry.source }}">{{ entry.source }}</span></td>
    </tr>
    {% endfor %}
</table>
{% endblock content %}