{% extends "base.html" %}

{% block content %}
<section id="editor-root"
  data-broadcast='{{ broadcast | tojson }}'
  data-permissions='{{ permissions | tojson }}'
  data-timezone='{{ timezone }}'
  data-translations='{{ translations | tojson }}'>
  <header class="editor-header">
    <div>
      <h1>{{ broadcast.metadata.title }}</h1>
      <p>{{ broadcast.directory }}</p>
    </div>
    <div class="top-actions">
      <button type="button" id="save-button">{{ translations["editor.save"] }}</button>
      <button type="button" id="publish-button">{{ translations["editor.post_now"] }}</button>
      <button type="button" id="schedule-button">{{ translations["editor.schedule"] }}</button>
      <button type="button" id="delete-storage-button" class="danger">{{ translations["editor.delete_storage"] }}</button>
    </div>
  </header>

  <section class="editor-tabs">
    <div class="editor-tab-list" role="tablist" aria-label="{{ translations['editor.settings_tabs'] }}">
      <button type="button" class="editor-tab-button active" id="editor-tab-main" data-tab="main" role="tab" aria-selected="true">{{ translations["editor.tab_main"] }}</button>
      <button type="button" class="editor-tab-button" id="editor-tab-telegram" data-tab="telegram" role="tab" aria-selected="false">{{ translations["editor.tab_telegram"] }}</button>
      <button type="button" class="editor-tab-button" id="editor-tab-pinning" data-tab="pinning" role="tab" aria-selected="false">{{ translations["editor.tab_pinning"] }}</button>
      <button type="button" class="editor-tab-button" id="editor-tab-logs" data-tab="logs" role="tab" aria-selected="false">{{ translations["editor.tab_logs"] }}</button>
    </div>

    <section class="editor-tab-panel active" id="editor-tab-panel-main" data-tab-panel="main" role="tabpanel" aria-labelledby="editor-tab-main">
      <section class="meta-panel">
        <label class="meta-title-field">{{ translations["editor.title"] }}
          <input type="text" id="title-input" value="{{ broadcast.metadata.title }}">
        </label>
        <label class="meta-checkbox meta-global-link-preview">
          <input type="checkbox" id="disable-link-previews-global">
          <span>{{ translations["editor.disable_link_previews_global"] }}</span>
        </label>
        <div class="telegram-target-fields">
          <label>{{ translations["editor.telegram_bot"] }}
            <select id="telegram-bot-select"></select>
          </label>
          <label>{{ translations["editor.telegram_chat"] }}
            <select id="telegram-chat-select"></select>
          </label>
        </div>
        <div class="meta-stack">
          <label>{{ translations["editor.language_order"] }}
            <select id="language-order-select">
              <option value="fi,sv,en">{{ translations["editor.language_order.fi_sv_en"] }}</option>
              <option value="fi,en,sv">{{ translations["editor.language_order.fi_en_sv"] }}</option>
              <option value="sv,fi,en">{{ translations["editor.language_order.sv_fi_en"] }}</option>
              <option value="sv,en,fi">{{ translations["editor.language_order.sv_en_fi"] }}</option>
              <option value="en,fi,sv">{{ translations["editor.language_order.en_fi_sv"] }}</option>
              <option value="en,sv,fi">{{ translations["editor.language_order.en_sv_fi"] }}</option>
            </select>
          </label>
        </div>
        <label class="meta-schedule-field">{{ translations["editor.schedule_label"] }}
          <input type="datetime-local" id="schedule-input">
          <small>{{ translations["editor.schedule_timezone"] }}: {{ timezone }}</small>
        </label>
      </section>
    </section>

    <section class="editor-tab-panel" id="editor-tab-panel-telegram" data-tab-panel="telegram" role="tabpanel" aria-labelledby="editor-tab-telegram" hidden>
      <section id="telegram-binding-panel" class="telegram-binding-panel"></section>
      <button type="button" id="delete-telegram-button" class="danger telegram-delete-button">{{ translations["editor.delete_telegram"] }}</button>
    </section>

    <section class="editor-tab-panel" id="editor-tab-panel-pinning" data-tab-panel="pinning" role="tabpanel" aria-labelledby="editor-tab-pinning" hidden>
      <section class="pinning-panel">
        <div class="meta-stack pinning-controls">
          <label>{{ translations["editor.discussion_pinning"] }}
            <select id="discussion-pinning-select">
              <option value="none">{{ translations["editor.discussion_pinning.none"] }}</option>
              <option value="first">{{ translations["editor.discussion_pinning.first"] }}</option>
              <option value="last">{{ translations["editor.discussion_pinning.last"] }}</option>
              <option value="all">{{ translations["editor.discussion_pinning.all"] }}</option>
            </select>
          </label>
          <label class="meta-checkbox meta-delete-service-field">
            <input type="checkbox" id="delete-pin-service-messages">
            <span>{{ translations["editor.delete_pin_service_messages"] }}</span>
          </label>
        </div>
        <div class="unpin-scheduler">
          <label>{{ translations["editor.unpin_schedule_label"] }}
            <input type="datetime-local" id="unpin-schedule-input">
          </label>
          <button type="button" id="unpin-schedule-button">{{ translations["editor.schedule_unpin"] }}</button>
        </div>
      </section>
    </section>

    <section class="editor-tab-panel" id="editor-tab-panel-logs" data-tab-panel="logs" role="tabpanel" aria-labelledby="editor-tab-logs" hidden>
      <section class="status-box" id="status-box">
        <div class="status-box-content" id="status-box-content"></div>
        <button type="button" id="clear-status-button">{{ translations["editor.clear_status"] }}</button>
      </section>
    </section>
  </section>

  <section class="images-panel">
    <h2>{{ translations["editor.global_images"] }}</h2>
    <div class="image-controls">
      <span class="upload-label">{{ translations["editor.add_global_images"] }}</span>
      <input type="file" id="upload-global" accept="image/*" multiple>
    </div>
    <div class="image-paste-controls">
      <button type="button" id="open-global-image-import-button" class="secondary-button">{{ translations["editor.open_image_import"] }}</button>
    </div>
    <div class="image-list" data-scope="global"></div>
  </section>

  <section id="languages-container"></section>
</section>
<div id="image-import-modal" class="image-import-modal" hidden>
  <div class="image-import-dialog" role="dialog" aria-modal="true" aria-labelledby="image-import-title">
    <div class="image-import-header">
      <h2 id="image-import-title">{{ translations["editor.image_import_title"] }}</h2>
      <button type="button" id="image-import-close-button" class="secondary-button">{{ translations["editor.close_image_import"] }}</button>
    </div>
    <p class="image-import-help">{{ translations["editor.image_import_help"] }}</p>
    <label>{{ translations["editor.image_import_format"] }}
      <select id="image-import-format-select">
        <option value="auto">{{ translations["editor.image_import_format.auto"] }}</option>
        <option value="png">{{ translations["editor.image_import_format.png"] }}</option>
        <option value="jpeg">{{ translations["editor.image_import_format.jpeg"] }}</option>
      </select>
    </label>
    <label>{{ translations["editor.image_import_url"] }}
      <input type="url" id="image-import-url-input" placeholder="{{ translations['editor.image_import_url_placeholder'] }}">
    </label>
    <div class="image-import-actions">
      <button type="button" id="image-import-submit-url-button">{{ translations["editor.import_image_url_submit"] }}</button>
      <button type="button" id="image-import-cancel-button" class="secondary-button">{{ translations["editor.cancel_image_import"] }}</button>
    </div>
  </div>
</div>
<script src="{{ static_asset_url('app.js') }}"></script>
{% endblock %}