{% extends "gateways/base.html" %}
{% load i18n %}
{% block title %}{% block op_title %}{% translate "Operations" %}{% endblock %} – {% translate "Rivet operations" %}{% endblock %}
{% block head %}<style>
  main { max-width:1180px; }
  .op { display:block; }
  .op-tree { font-size:.95rem; }
  .op-tree ul { list-style:none; margin:0; padding:0 0 0 14px; border-left:1px solid var(--line); }
  .tree-desk > ul, .tree-mobile > ul { padding-left:0; border-left:0; }
  .op-tree li { line-height:1.4; padding:3px 0; }
  .op-tree a { padding:2px 6px; border-radius:6px; text-decoration:none; color:var(--fg);
               overflow-wrap:anywhere; -webkit-box-decoration-break:clone;
               box-decoration-break:clone; }
  .op-tree a:hover { text-decoration:underline; }
  .op-tree a[aria-current="page"] { background:var(--accent); color:#fff; font-weight:600; }
  .op-tree .count { color:var(--muted); font-size:.85rem; }
  .op-tree a[aria-current="page"] .count { color:#fff; }
  .op-tree summary { cursor:pointer; padding-left:2px; }
  .op-tree summary::marker { color:var(--muted); }
  .op-tree .leaf { padding-left:14px; }
  .op-tree .badge { font-size:.72rem; padding:0 6px; }
  .tree-mobile { background:var(--card); border:1px solid var(--line); border-radius:10px;
                 padding:8px 12px; margin-bottom:16px; }
  .tree-mobile > summary { font-weight:600; padding:4px 0; }
  .tree-desk { display:none; }
  .msg.success { border-color:var(--accent); }
  .msg.warning { border-color:#b8860b; }
  table.list { width:100%; border-collapse:collapse; font-size:.95rem; }
  table.list th, table.list td { text-align:left; padding:6px 8px; border-top:1px solid var(--line);
                                 vertical-align:top; overflow-wrap:break-word; }
  table.list th { color:var(--muted); font-weight:600; font-size:.85rem; border-top:0;
                  white-space:nowrap; }
  table.list .badge { white-space:nowrap; }
  /* Wörter in Tabellen nie mitten im Wort trennen: lieber waagerecht scrollen (.table-wrap). */
  table.list th { white-space:nowrap; }
  table.list th, table.list td { overflow-wrap:normal; word-break:normal; }
  table.list td code, table.list td .key { overflow-wrap:anywhere; }
  .table-wrap { overflow-x:auto; }
  .row { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0; }
  .row form { margin:0; }
  label.check { display:flex; gap:8px; align-items:flex-start; margin:8px 0; }
  label.check input { margin-top:5px; }
  .secret { font:700 clamp(1.2rem, 5vw, 1.8rem)/1.3 ui-monospace, monospace; letter-spacing:.04em;
            user-select:all; -webkit-user-select:all; padding:12px; border:2px dashed var(--accent);
            border-radius:10px; text-align:center; margin:8px 0; overflow-wrap:anywhere; }
  code.key { word-break:break-all; font-size:.85rem; }
  input[type=number] { width:8em; padding:10px; font-size:1rem; border:1px solid var(--line);
                       border-radius:8px; background:var(--card); color:var(--fg); }
  @media (min-width: 900px) {
    .op { display:grid; grid-template-columns:minmax(220px, 290px) minmax(0, 1fr); gap:24px;
          align-items:start; }
    .tree-mobile { display:none; }
    .tree-desk { display:block; position:sticky; top:12px; max-height:calc(100vh - 24px);
                 overflow:auto; background:var(--card); border:1px solid var(--line);
                 border-radius:10px; padding:10px; }
  }
</style>{% block op_head %}{% endblock %}{% endblock %}
{% block content %}
<div class="op">
  <nav class="op-tree" aria-label="{% translate "Operations" %}">
    <details class="tree-mobile"><summary>{% translate "Navigation" %}</summary>{% include "operator/_tree.html" with nodes=tree %}</details>
    <div class="tree-desk">{% include "operator/_tree.html" with nodes=tree %}</div>
  </nav>
  <section class="op-main">
    {% if crumbs %}<nav class="crumbs" aria-label="{% translate "Breadcrumbs" %}"><ol>
      {% for n in crumbs %}<li>{% if forloop.last and not subpage %}<span aria-current="page">{{ n.label }}</span>{% else %}<a href="{{ n.url }}">{{ n.label }}</a>{% endif %}</li>{% endfor %}
      {% if subpage %}<li><span aria-current="page">{{ subpage }}</span></li>{% endif %}
    </ol></nav>{% endif %}
    {% block op_content %}{% endblock %}
  </section>
</div>
{% endblock %}