{% include 'overall_header.html' %}

<style>
.su-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:10px 0; }
.su-toolbar a { padding:4px 8px; font-size:12px; }
.su-version { float:right; color:inherit; opacity:.65; font-size:12px; }
.su-upload { max-width:780px; margin-bottom:14px; }
.su-drop { border:2px dashed #8b9eac; border-radius:5px; padding:18px 14px; text-align:center; transition:background .15s; }
.su-drop.su-drag { background:#e3edf7; border-color:#115098; }
.su-drop label { display:block; font-weight:bold; margin-bottom:8px; }
.su-drop input { max-width:100%; }
.su-upload .submit-buttons { margin:10px 0 0; padding:0; }
.su-upload [hidden], #su-upload-error[hidden] { display:none !important; }
.su-upload progress { width:100%; height:16px; margin-top:10px; }
.su-feedback { margin:6px 0 0; overflow-wrap:anywhere; }
.su-manager { margin:12px 0; border:1px solid #aabac5; border-radius:4px; }
.su-manager > summary { cursor:pointer; padding:8px 10px; font-weight:bold; }
.su-body { padding:0 10px 10px; }
.su-scroll { overflow-x:auto; }
.su-table { table-layout:auto; width:100%; margin:0; }
.su-table td, .su-table th { padding:7px 8px; vertical-align:middle; }
.su-table .su-actions { width:225px; }
.su-path { font-size:11px; opacity:.7; overflow-wrap:anywhere; margin-top:3px; }
.su-meta { margin-top:3px; font-size:11px; }
.su-meta summary { cursor:pointer; }
.su-meta p { margin:4px 0; font-size:inherit; }
.su-row-form { display:flex; gap:4px; align-items:center; margin:0; padding:0; }
.su-row-form select { width:165px; max-width:100%; font-size:12px; margin:0; }
.su-row-form .button2 { padding:3px 6px; margin:0; font-size:12px; }
.su-links { margin-top:4px; font-size:11px; }
.su-links a { margin-right:8px; }
.su-badge { display:inline-block; font-size:11px; padding:2px 5px; border:1px solid #aabac5; border-radius:3px; }
.su-note { font-size:12px; margin:8px 0 0; }
@media(max-width:700px) {
 .su-table .su-actions { width:175px; }
 .su-row-form select { width:125px; }
 .su-table td, .su-table th { padding:6px 5px; }
 .su-drop { padding:12px 8px; }
}
</style>

<h1>{{ lang('ACP_STYLE_UPLOADER') }} <span class="su-version">{{ S_STYLE_UPLOADER_VERSION }}</span></h1>
<p>{{ lang('STYLE_UPLOADER_EXPLAIN') }}</p>

{% if S_MANAGEMENT_ERROR %}
<div class="errorbox"><h3>{{ lang('ERROR') }}</h3><p>{{ S_MANAGEMENT_ERROR }}</p></div>
{% endif %}
{% if S_MANAGEMENT_NOTICE %}
<div class="successbox"><h3>{{ lang('SUCCESS') }}</h3><p>{{ S_MANAGEMENT_NOTICE }}</p></div>
{% endif %}
<div id="su-upload-error" class="errorbox" hidden><h3>{{ lang('ERROR') }}</h3><p></p></div>

<form id="style_uploader" class="su-upload" method="post" action="{{ U_ACTION }}" enctype="multipart/form-data">
 <fieldset>
  <legend>{{ lang('STYLE_UPLOADER_UPLOAD') }}</legend>
  <div id="su-drop" class="su-drop">
   <label for="style_zip">{{ lang('STYLE_UPLOADER_DROP') }}</label>
   <input type="file" id="style_zip" name="style_zip" accept=".zip,application/zip" required>
   <p id="su-file-name" class="su-feedback" aria-live="polite"></p>
  </div>
  <progress id="su-progress" value="0" max="100" hidden aria-label="{{ lang('STYLE_UPLOADER_PROGRESS') }}"></progress>
  <p id="su-progress-text" class="su-feedback" aria-live="polite"></p>
  <p class="submit-buttons"><input id="su-upload-button" class="button1" type="submit" name="submit" value="{{ lang('STYLE_UPLOADER_UPLOAD') }}"></p>
  {{ S_FORM_TOKEN }}
 </fieldset>
</form>

<details class="su-manager" open>
 <summary>{{ lang('STYLE_UPLOADER_MANAGEMENT') }} ({{ managed_styles|length }})</summary>
 <div class="su-body"><div class="su-scroll">
  <table class="table1 zebra-table su-table">
   <thead><tr><th>{{ lang('STYLE_UPLOADER_STYLE_NAME') }}</th><th>{{ lang('STYLE_UPLOADER_STATUS') }}</th><th class="su-actions">{{ lang('ACTIONS') }}</th></tr></thead>
   <tbody>
   {% for style in managed_styles %}
    <tr>
     <td><strong>{{ style.S_STYLE_NAME }}</strong><div class="su-path">styles/{{ style.S_STYLE_PATH }}/</div>
      <details class="su-meta"><summary>{{ lang('DETAILS') }}</summary>
       <p>{{ lang('STYLE_UPLOADER_STYLE_VERSION') }}: {{ style.S_STYLE_VERSION }} · phpBB: {{ style.S_PHPBB_VERSION }}<br>{{ lang('STYLE_UPLOADER_USERS') }}: {{ style.S_USER_COUNT }}</p>
      </details>
     </td>
     <td><span class="su-badge">{% if style.S_ACTIVE %}{{ lang('STYLE_UPLOADER_ACTIVE') }}{% else %}{{ lang('STYLE_UPLOADER_INACTIVE') }}{% endif %}</span>{% if style.S_DEFAULT %}<br><span class="su-meta">{{ lang('STYLE_UPLOADER_DEFAULT_BADGE') }}</span>{% endif %}</td>
     <td class="su-actions">
      {% if not style.S_DEFAULT or style.S_CAN_REMOVE %}
      <form class="su-row-form" method="post" action="{{ U_ACTION }}">
       <input type="hidden" name="style_id" value="{{ style.S_STYLE_ID }}">
       <select name="su_action" aria-label="{{ lang('ACTIONS') }}: {{ style.S_STYLE_NAME }}" required>
        <option value="">{{ lang('STYLE_UPLOADER_CHOOSE_ACTION') }}</option>
        {% if not style.S_ACTIVE %}<option value="activate">{{ lang('STYLE_UPLOADER_ACTIVATE') }}</option>{% endif %}
        {% if not style.S_DEFAULT %}<option value="default">{{ lang('STYLE_UPLOADER_MAKE_DEFAULT') }}</option>{% endif %}
        {% if style.S_CAN_REMOVE %}<option value="uninstall">{{ lang('STYLE_UPLOADER_UNINSTALL') }}</option><option value="delete">{{ lang('STYLE_UPLOADER_DELETE') }}</option>{% endif %}
       </select>
       <button type="submit" name="style_action" value="1" class="button2">{{ lang('GO') }}</button>
       {{ S_FORM_TOKEN }}
      </form>
      {% endif %}
      <div class="su-links"><a href="{{ style.U_DETAILS }}">{{ lang('DETAILS') }}</a><a href="{{ style.U_PREVIEW }}" target="_blank" rel="noopener">{{ lang('PREVIEW') }}</a></div>
     </td>
    </tr>
   {% else %}<tr><td colspan="3">{{ lang('STYLE_UPLOADER_NO_STYLES') }}</td></tr>{% endfor %}
   </tbody>
  </table>
 </div></div>
</details>

<details class="su-manager"{% if available_styles|length %} open{% endif %}>
 <summary>{{ lang('STYLE_UPLOADER_AVAILABLE') }} ({{ available_styles|length }})</summary>
 <div class="su-body"><p class="su-note">{{ lang('STYLE_UPLOADER_AVAILABLE_EXPLAIN') }}</p><div class="su-scroll">
  <table class="table1 zebra-table su-table">
   <thead><tr><th>{{ lang('STYLE_UPLOADER_STYLE_NAME') }}</th><th>{{ lang('STYLE_UPLOADER_STYLE_PARENT') }}</th><th class="su-actions">{{ lang('ACTIONS') }}</th></tr></thead>
   <tbody>
   {% for style in available_styles %}
    <tr>
     <td><strong>{{ style.S_STYLE_NAME }}</strong><div class="su-path">styles/{{ style.S_STYLE_PATH }}/</div><div class="su-meta">{{ style.S_STYLE_VERSION }} · phpBB {{ style.S_PHPBB_VERSION }}</div></td>
     <td>{{ style.S_STYLE_PARENT }}</td>
     <td class="su-actions"><form class="su-row-form" method="post" action="{{ U_ACTION }}">
      <input type="hidden" name="style_folder" value="{{ style.S_STYLE_PATH }}">
      <select name="su_action" aria-label="{{ lang('ACTIONS') }}: {{ style.S_STYLE_NAME }}" required>
       <option value="">{{ lang('STYLE_UPLOADER_CHOOSE_ACTION') }}</option><option value="install">{{ lang('STYLE_UPLOADER_INSTALL') }}</option>
       {% if style.S_CAN_REMOVE %}<option value="delete_files">{{ lang('STYLE_UPLOADER_DELETE_FILES') }}</option>{% endif %}
      </select>
      <button type="submit" name="style_action" value="1" class="button2">{{ lang('GO') }}</button>
      {{ S_FORM_TOKEN }}
     </form></td>
    </tr>
   {% else %}<tr><td colspan="3">{{ lang('STYLE_UPLOADER_NO_AVAILABLE') }}</td></tr>{% endfor %}
   </tbody>
  </table>
 </div></div>
</details>

<div class="su-toolbar"><a class="button2" href="{{ U_INSTALL_STYLES }}">{{ lang('STYLE_UPLOADER_INSTALL_STYLES') }}</a><a class="button2" href="{{ U_MANAGE_STYLES }}">{{ lang('STYLE_UPLOADER_MANAGE_STYLES') }}</a></div>
<details class="su-note"><summary>{{ lang('STYLE_UPLOADER_REMOVAL_NOTE_TITLE') }}</summary><p>{{ lang('STYLE_UPLOADER_REMOVAL_NOTE') }}</p><p>{{ lang('STYLE_UPLOADER_SECURITY_NOTE') }}</p></details>

<script>
(function () {
 'use strict';
 var form = document.getElementById('style_uploader');
 var input = document.getElementById('style_zip');
 var drop = document.getElementById('su-drop');
 var button = document.getElementById('su-upload-button');
 var progress = document.getElementById('su-progress');
 var status = document.getElementById('su-progress-text');
 var error = document.getElementById('su-upload-error');
 function showError(message) { error.querySelector('p').textContent = message; error.hidden = false; }
 function showFile() { document.getElementById('su-file-name').textContent = input.files.length ? input.files[0].name : ''; }
 input.addEventListener('change', showFile);
 ['dragenter', 'dragover'].forEach(function (type) {
  drop.addEventListener(type, function (event) { event.preventDefault(); drop.classList.add('su-drag'); });
 });
 ['dragleave', 'drop'].forEach(function (type) {
  drop.addEventListener(type, function (event) { event.preventDefault(); drop.classList.remove('su-drag'); });
 });
 drop.addEventListener('drop', function (event) {
  if (!event.dataTransfer.files.length) return;
  if (event.dataTransfer.files.length !== 1 || !/\.zip$/i.test(event.dataTransfer.files[0].name)) {
   showError('{{ lang('STYLE_UPLOADER_DROP_INVALID')|escape('js') }}'); return;
  }
  try { input.files = event.dataTransfer.files; showFile(); error.hidden = true; }
  catch (e) { input.click(); }
 });
 form.addEventListener('submit', function (event) {
  if (!window.FormData || !window.XMLHttpRequest || !input.files.length) return;
  event.preventDefault(); error.hidden = true; button.disabled = true; input.disabled = false;
  var data = new FormData(form); data.append('submit', '1'); data.append('su_ajax', '1');
  input.disabled = true; progress.hidden = false; progress.value = 0;
  status.textContent = '{{ lang('STYLE_UPLOADER_UPLOADING')|escape('js') }}';
  var xhr = new XMLHttpRequest();
  xhr.open('POST', form.action, true);
  xhr.upload.addEventListener('progress', function (event) {
   if (!event.lengthComputable) return;
   var percent = Math.round(event.loaded / event.total * 100); progress.value = percent;
   status.textContent = percent === 100 ? '{{ lang('STYLE_UPLOADER_EXTRACTING')|escape('js') }}' : '{{ lang('STYLE_UPLOADER_UPLOADING')|escape('js') }} ' + percent + '%';
  });
  function restore(message) { button.disabled = false; input.disabled = false; progress.hidden = true; status.textContent = ''; showError(message); }
  xhr.addEventListener('load', function () {
   try {
    var result = JSON.parse(xhr.responseText);
    if (xhr.status >= 200 && xhr.status < 300 && result.redirect) { window.location.assign(result.redirect); return; }
    restore(result.error || '{{ lang('STYLE_UPLOADER_AJAX_ERROR')|escape('js') }}');
   } catch (e) { restore('{{ lang('STYLE_UPLOADER_AJAX_ERROR')|escape('js') }}'); }
  });
  xhr.addEventListener('error', function () { restore('{{ lang('STYLE_UPLOADER_AJAX_ERROR')|escape('js') }}'); });
  xhr.addEventListener('abort', function () { restore('{{ lang('STYLE_UPLOADER_AJAX_ERROR')|escape('js') }}'); });
  xhr.send(data);
 });
}());
</script>
{% include 'overall_footer.html' %}