{% extends "base.html" %}

{% block content %}
<div class="app-shell d-flex">
  <nav id="tab-rail" class="d-flex flex-column flex-shrink-0" aria-label="{{ t('app.tabs') }}">
    <div id="tab-items" role="tablist" aria-orientation="vertical" aria-label="{{ t('app.tabs') }}"></div>
    <button type="button" id="tab-add" class="rail-add btn text-start" aria-label="{{ t('app.new_tab') }}" title="{{ t('app.new_tab') }}">
      <i class="ph ph-plus" aria-hidden="true"></i>
      <span>{{ t("app.new_tab") }}</span>
    </button>
    <div class="flex-grow-1"></div>
    <div class="server-hint px-3 pb-1 text-secondary small" aria-label="{{ t('app.servers') }}"
         title="{{ t('app.servers') }}">
      {% for server in servers %}
        <div class="text-truncate"><i class="ph ph-plugs-connected" aria-hidden="true"></i> {{ server }}</div>
      {% endfor %}
    </div>
    <div class="dropup px-2 pb-2">
      <button type="button" class="btn user-btn w-100 d-flex align-items-center gap-2"
              data-bs-toggle="dropdown" aria-expanded="false">
        <span class="user-avatar" aria-hidden="true">{{ session.username[:2]|upper }}</span>
        <span class="text-truncate">{{ session.username }}</span>
      </button>
      <ul class="dropdown-menu w-100">
        <li>
          <button type="button" class="dropdown-item" id="menu-settings">
            <i class="ph ph-gear" aria-hidden="true"></i> {{ t("app.settings") }}
          </button>
        </li>
        <li>
          <button type="button" class="dropdown-item" id="menu-storage">
            <i class="ph ph-database" aria-hidden="true"></i> {{ t("storage.title") }}
          </button>
        </li>
        <li>
          <button type="button" class="dropdown-item" id="menu-about">
            <i class="ph ph-info" aria-hidden="true"></i> {{ t("about.title") }}
          </button>
        </li>
        <li><hr class="dropdown-divider"></li>
        <li>
          <button type="button" class="dropdown-item" hx-post="/auth/logout">
            <i class="ph ph-sign-out" aria-hidden="true"></i> {{ t("app.logout") }}
          </button>
        </li>
      </ul>
    </div>
  </nav>
  <main id="tab-content" class="flex-grow-1 min-w-0">
    <div id="split-root" class="d-flex flex-column h-100">
      <div id="editor-pane" class="d-flex flex-column">
        <div id="editor-toolbar" class="d-flex align-items-center gap-2 px-2 py-1 border-bottom">
          <button type="button" id="run-btn" class="btn btn-sm btn-primary">
            <i class="ph ph-play" aria-hidden="true"></i> {{ t("app.run") }}
          </button>
          <button type="button" id="stop-btn" class="btn btn-sm btn-outline-danger d-none"
                  aria-label="{{ t('app.cancel') }}" title="{{ t('app.cancel') }}">
            <i class="ph ph-stop" aria-hidden="true"></i> {{ t("app.cancel") }}
          </button>
          <span id="run-indicator" class="htmx-indicator spinner-border spinner-border-sm text-primary"
                role="status" aria-hidden="true"></span>
          <select id="format-select" class="form-select form-select-sm w-auto" aria-label="{{ t('app.format') }}">
            <option value="table">{{ t("format.table") }}</option>
            <option value="json">JSON</option>
            <option value="jsonl">JSONL</option>
            <option value="xml">XML</option>
            <option value="csv">CSV</option>
            <option value="tsv">TSV</option>
            <option value="tsv-quoted">TSV quoted</option>
          </select>
          <div class="dropdown">
            <button type="button" id="saved-btn" class="btn btn-sm btn-outline-secondary"
                    data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false"
                    aria-label="{{ t('app.saved') }}" title="{{ t('app.saved') }}">
              <i class="ph ph-bookmark-simple" aria-hidden="true"></i>
            </button>
            <ul class="dropdown-menu saved-menu" id="saved-menu"></ul>
          </div>
          <button type="button" id="format-btn" class="btn btn-sm btn-outline-secondary"
                  aria-label="{{ t('app.format_query') }}" title="{{ t('app.format_query') }}">
            <i class="ph ph-text-indent" aria-hidden="true"></i>
          </button>
          <button type="button" id="attach-btn" class="btn btn-sm btn-outline-secondary"
                  aria-label="{{ t('app.attach') }}" title="{{ t('app.attach') }}">
            <i class="ph ph-paperclip" aria-hidden="true"></i>
          </button>
          <input type="file" id="file-input" multiple class="d-none">
          <!-- Opened by a run when the statement uses file #BROWSE#. -->
          <input type="file" id="browse-input" class="d-none">
          <span id="file-chips" class="d-flex gap-1 align-items-center flex-wrap min-w-0"></span>
          <button type="button" id="shortcuts-btn" class="btn btn-sm btn-outline-secondary ms-auto"
                  aria-label="{{ t('shortcuts.title') }}" title="{{ t('shortcuts.title') }}">
            <i class="ph ph-question" aria-hidden="true"></i>
          </button>
          <button type="button" id="about-btn" class="btn btn-sm btn-outline-secondary"
                  aria-label="{{ t('about.title') }}" title="{{ t('about.title') }}">
            <i class="ph ph-info" aria-hidden="true"></i>
          </button>
        </div>
        <div id="monaco-host" class="flex-grow-1 min-h-0"></div>
      </div>
      <div id="split-handle" role="separator" aria-orientation="horizontal" tabindex="-1">
        <span class="grip" aria-hidden="true"></span>
      </div>
      <div id="results-pane" class="flex-grow-1 min-h-0"></div>
    </div>
    <!-- Permanent tabs, one pane each, filled on their first activation. -->
    <div id="definition-pane" class="h-100 overflow-auto d-none"></div>
    <div id="jobcalls-pane" class="h-100 d-none"></div>
  </main>
</div>
<div id="modal-root"></div>
<div class="modal fade" id="preview-modal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered preview-dialog">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h1 class="modal-title fs-6" id="preview-title"></h1>
        <div class="btn-group btn-group-sm ms-auto me-2" role="group">
          <button type="button" class="btn btn-outline-secondary preview-nav" data-dir="-1"
                  aria-label="{{ t('details.prev') }}" title="{{ t('details.prev') }}" disabled>
            <i class="ph ph-caret-left" aria-hidden="true"></i>
          </button>
          <button type="button" class="btn btn-outline-secondary preview-nav" data-dir="1"
                  aria-label="{{ t('details.next') }}" title="{{ t('details.next') }}" disabled>
            <i class="ph ph-caret-right" aria-hidden="true"></i>
          </button>
        </div>
        {# Both act on the editor, so app.js shows them for a text preview only. #}
        <button type="button" id="preview-format" class="btn btn-sm btn-outline-secondary me-2 d-none"
                aria-label="{{ t('results.preview_format') }}" title="{{ t('results.preview_format') }}">
          <i class="ph ph-text-indent" aria-hidden="true"></i>
        </button>
        <button type="button" id="preview-copy" class="btn btn-sm btn-outline-secondary me-2 d-none"
                aria-label="{{ t('results.preview_copy') }}" title="{{ t('results.preview_copy') }}">
          <i class="ph ph-copy" aria-hidden="true"></i>
        </button>
        {# Prepares an update statement in a new tab; it never writes by itself,
           which is what the title says instead of just "save". #}
        <button type="button" id="preview-save" class="btn btn-sm btn-outline-secondary me-2 d-none"
                aria-label="{{ t('results.preview_save') }}" title="{{ t('results.preview_save') }}">
          <i class="ph ph-floppy-disk" aria-hidden="true"></i>
        </button>
        {# The archived file, never the editor buffer: a download must not hand
           out a trimmed or truncated copy of a document. #}
        <a id="preview-download" class="btn btn-sm btn-outline-secondary me-2" download
           aria-label="{{ t('results.download') }}" title="{{ t('results.download') }}">
          <i class="ph ph-download-simple" aria-hidden="true"></i>
        </a>
        <button type="button" class="btn-close m-0" data-bs-dismiss="modal" aria-label="{{ t('settings.close') }}"></button>
      </div>
      <div class="modal-body p-0" id="preview-body"></div>
    </div>
  </div>
</div>
<div class="modal fade" id="history-modal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h1 class="modal-title fs-6">
          <i class="ph ph-clock-counter-clockwise" aria-hidden="true"></i>
          {{ t("details.history") }} <span id="history-title" class="text-secondary"></span>
        </h1>
        {# The button names the order it shows, so its label reads as the state and
           both directions ride along as data attributes for app.js to swap in. #}
        <button type="button" id="history-sort" class="btn btn-sm btn-outline-secondary ms-auto me-2"
                data-dir="desc"
                data-title-desc="{{ t('history.sort_newest') }}"
                data-title-asc="{{ t('history.sort_oldest') }}"
                aria-label="{{ t('history.sort_newest') }}" title="{{ t('history.sort_newest') }}">
          <i class="ph ph-sort-descending" aria-hidden="true"></i>
        </button>
        <input type="search" id="history-filter" class="form-control form-control-sm history-filter me-2"
               placeholder="{{ t('history.filter') }}" aria-label="{{ t('history.filter') }}"
               autocomplete="off">
        <button type="button" class="btn-close m-0" data-bs-dismiss="modal" aria-label="{{ t('settings.close') }}"></button>
      </div>
      <div class="modal-body" id="history-body"></div>
    </div>
  </div>
</div>
<div class="modal fade" id="about-modal" tabindex="-1" aria-labelledby="about-title" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h1 class="modal-title fs-6" id="about-title">
          <i class="ph ph-info" aria-hidden="true"></i>
          {{ t("about.title") }}
        </h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('settings.close') }}"></button>
      </div>
      <div class="modal-body">
        <div class="text-center mb-3">
          <i class="ph ph-stack about-logo" aria-hidden="true"></i>
          <h2 class="h5 mt-2 mb-1">ECMind blue Studio</h2>
          <p class="text-secondary mb-0">{{ t("about.version") }} {{ app_version }}</p>
        </div>
        <dl class="row mb-3 small">
          <dt class="col-6 fw-normal text-secondary">{{ t("about.client") }}</dt>
          <dd class="col-6 mb-0 text-end">ecmind-blue-client {{ client_version }}</dd>
        </dl>
        <p class="small mb-2">
          {{ t("about.license") }}
          <a href="https://gitlab.ecmind.ch/open/ecmind_blue_studio/-/blob/main/LICENSE"
             target="_blank" rel="noopener">LICENSE</a>
          &middot;
          <a href="https://gitlab.ecmind.ch/open/ecmind_blue_studio/-/blob/main/THIRD-PARTY-NOTICES.md"
             target="_blank" rel="noopener">{{ t("about.notices") }}</a>
        </p>
        <p class="small text-secondary mb-0">{{ t("about.dms_license") }}</p>
      </div>
      <div class="modal-footer py-2">
        <a class="btn btn-sm btn-outline-secondary" href="https://ecmind.ch/" target="_blank" rel="noopener">
          <i class="ph ph-globe" aria-hidden="true"></i> ecmind.ch
        </a>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="shortcuts-modal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h1 class="modal-title fs-6">
          <i class="ph ph-question" aria-hidden="true"></i>
          {{ t("shortcuts.title") }}
        </h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('settings.close') }}"></button>
      </div>
      <div class="modal-body">
        <table class="table table-sm mb-0 shortcuts-table">
          <tbody>
            <tr><td><kbd>Ctrl</kbd>+<kbd>Enter</kbd></td><td>{{ t("shortcuts.run") }}</td></tr>
            <tr><td><kbd>Alt</kbd>+<kbd>N</kbd></td><td>{{ t("shortcuts.new_tab") }}</td></tr>
            <tr><td><kbd>Alt</kbd>+<kbd>W</kbd></td><td>{{ t("shortcuts.close_tab") }}</td></tr>
            <tr><td><kbd>Shift</kbd>+<kbd>Alt</kbd>+<kbd>F</kbd></td><td>{{ t("shortcuts.format") }}</td></tr>
            <tr><td><kbd>&uarr;</kbd> / <kbd>&darr;</kbd></td><td>{{ t("shortcuts.tab_nav") }}</td></tr>
            <tr><td><kbd>Del</kbd></td><td>{{ t("shortcuts.tab_close") }}</td></tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="table-modal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h1 class="modal-title fs-6">
          <i class="ph ph-table" aria-hidden="true"></i>
          <span id="table-title" class="text-secondary"></span>
        </h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('settings.close') }}"></button>
      </div>
      <div class="modal-body" id="table-body"></div>
    </div>
  </div>
</div>
<div class="modal fade" id="jobs-modal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable jobs-dialog">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h1 class="modal-title fs-6">
          <i class="ph ph-list" aria-hidden="true"></i> {{ t("jobcalls.jobs_title") }}
        </h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('settings.close') }}"></button>
      </div>
      <div class="modal-header py-2 gap-2 flex-nowrap">
        <input type="search" id="jobs-filter" class="form-control form-control-sm"
               placeholder="{{ t('jobcalls.jobs_filter') }}" aria-label="{{ t('jobcalls.jobs_filter') }}"
               autocomplete="off">
        <button type="button" class="btn btn-sm btn-outline-secondary text-nowrap" id="jobs-all">
          {{ t("jobcalls.select_all") }}
        </button>
        <button type="button" class="btn btn-sm btn-outline-secondary text-nowrap" id="jobs-none">
          {{ t("jobcalls.select_none") }}
        </button>
      </div>
      <div class="modal-body" id="jobs-body"></div>
      <div class="modal-footer py-2">
        <button type="button" class="btn btn-sm btn-primary" id="jobs-apply" data-bs-dismiss="modal">
          {{ t("jobcalls.jobs_apply") }}
        </button>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script nonce="{{ csp_nonce }}">
  // The effective settings of this login, rendered by the server. Nothing about
  // them is kept in browser storage; the DMS record is the only place they live.
  window.EBS_UI = {
    mode: {{ ui.mode | tojson }},
    brand: {{ ui.brand | tojson }},
    language: {{ ui.language | tojson }},
    table_lines: {{ ui.table_lines | tojson }},
    available: {{ config_available | tojson }}
  };
  // Fixed tabs the signed-in user's system roles unlock. Their endpoints check
  // the same roles, so this list only decides what the rail renders.
  window.EBS_FIXED_TABS = {{ fixed_tabs | tojson }};
</script>
<script src="/static/js/i18n.js"></script>
<script src="/static/js/sync.js"></script>
<script src="/static/js/splitter.js"></script>
<script src="/static/js/attachments.js"></script>
<script src="/static/js/saved.js"></script>
<script src="/static/js/definition.js"></script>
<script src="/static/js/jobcalls.js"></script>
<script src="/static/js/tabs.js"></script>
<script src="/static/js/ecmql.js"></script>
<script src="/static/js/output.js"></script>
<script src="/static/js/preview.js"></script>
<script src="/static/js/editor.js"></script>
<script src="/static/js/settings.js"></script>
<script src="/static/js/userconfig.js"></script>
<script src="/static/vendor/monaco/vs/loader.js"></script>
<script nonce="{{ csp_nonce }}">
  require.config({ paths: { vs: "/static/vendor/monaco/vs" } });
  window.MonacoEnvironment = {
    getWorkerUrl: function () { return "/static/vendor/monaco/vs/base/worker/workerMain.js"; }
  };
  // The editor's own chrome, the find widget and the context menu among it,
  // reads a message bundle the loader has to have seen before editor.main is
  // built. Only German is vendored; every other locale keeps Monaco's English.
  var nls = {{ ("vs/nls.messages.de" if locale == "de" else "") | tojson }};
  var boot = function () {
    require(["vs/editor/editor.main"], function () { window.EBS.editor.boot(); });
  };
  if (nls) { require([nls], boot); } else { boot(); }
</script>
{% endblock %}