{% extends "base.html" %}
{% from "_ui.html" import page_head %}
{% block title %}Support{% endblock %}
{% block content %}
{{ page_head('help', 'Support', 'Tell us what you need help with - your request goes straight to the support team.') }}
<style>
  .attach-drop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .attach-drop input[type=file] { display: none; }
  .attach-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
  .attach-list li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--line);
                    border-radius: 8px; background: var(--surface-3); }
  .attach-list .ic { color: var(--link); flex: none; }
  .attach-list .aname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: .9rem; }
  .attach-list .asize { color: var(--muted); font-size: .8rem; flex: none; }
  .attach-error { color: var(--danger); font-weight: 600; font-size: .88rem; margin-top: 8px; }
  [hidden] { display: none !important; }
</style>

<div class="card" style="max-width:720px">
  <div class="card-head"><h3>{{ icon('mail') }} New support request</h3></div>
  <div class="card-body">
    <form method="post" enctype="multipart/form-data" id="supportForm">
      <input type="hidden" name="csrf" value="{{ csrf_token }}">
      <div class="field">
        <label for="supTitle" class="req">Title</label>
        <div class="input-icon">{{ icon('type') }}<input name="title" id="supTitle" value="{{ values.title }}" required maxlength="200" autofocus placeholder="A short summary of the issue"></div>
      </div>
      <div class="field" style="margin-top:16px">
        <label for="supMessage" class="req">Message</label>
        <textarea name="message" id="supMessage" required maxlength="5000" rows="7" placeholder="Describe what happened or what you need">{{ values.message }}</textarea>
      </div>
      <div class="field" style="margin-top:16px">
        <label>Attachments</label>
        <div class="attach-drop">
          <button type="button" class="btn small ghost" id="addFiles">{{ icon('paperclip') }} Add files</button>
          <span class="hint" style="margin:0">Images and documents (PDF, Word, Excel, PowerPoint, text, CSV and more). Up to {{ max_files }} files, {{ max_file_mb }}&nbsp;MB each, {{ max_total_mb }}&nbsp;MB in total.</span>
          <input type="file" id="fileInput" name="files" multiple accept="{{ accept }}">
        </div>
        <ul class="attach-list" id="attachList"></ul>
        <p class="attach-error" id="attachError" hidden></p>
      </div>
      <div class="form-actions">
        <button class="btn">{{ icon('send') }} Submit</button>
      </div>
    </form>
  </div>
</div>

<script nonce="{{ csp_nonce }}">
  (function () {
    var MAX_FILES = {{ max_files }}, MAX_FILE = {{ max_file_mb }} * 1048576, MAX_TOTAL = {{ max_total_mb }} * 1048576;
    var input = document.getElementById('fileInput'), list = document.getElementById('attachList'), err = document.getElementById('attachError');
    var files = [];
    function size(n) { return n >= 1048576 ? (n / 1048576).toFixed(1) + ' MB' : Math.max(1, Math.round(n / 1024)) + ' KB'; }
    function sync() {
      var dt = new DataTransfer();
      files.forEach(function (f) { dt.items.add(f); });
      input.files = dt.files;
      list.replaceChildren();
      files.forEach(function (f, i) {
        var li = document.createElement('li');
        li.innerHTML = '<svg class="ic" aria-hidden="true"><use href="#i-paperclip"></use></svg><span class="aname"></span><span class="asize"></span>' +
                       '<button type="button" class="btn icon del" title="Remove" aria-label="Remove"><svg class="ic" aria-hidden="true"><use href="#i-x"></use></svg></button>';
        li.querySelector('.aname').textContent = f.name;
        li.querySelector('.asize').textContent = size(f.size);
        li.querySelector('button').addEventListener('click', function () { files.splice(i, 1); say(''); sync(); });
        list.appendChild(li);
      });
    }
    function say(t) { err.hidden = !t; err.textContent = t || ''; }
    document.getElementById('addFiles').addEventListener('click', function () { input.click(); });
    input.addEventListener('change', function () {
      var picked = Array.prototype.slice.call(input.files), problem = '';
      picked.forEach(function (f) {
        if (files.some(function (x) { return x.name === f.name && x.size === f.size; })) return;
        var total = files.reduce(function (s, x) { return s + x.size; }, 0);
        if (files.length >= MAX_FILES) problem = 'You can attach up to ' + MAX_FILES + ' files.';
        else if (f.size > MAX_FILE) problem = '"' + f.name + '" is over {{ max_file_mb }} MB.';
        else if (total + f.size > MAX_TOTAL) problem = 'The attachments would go over {{ max_total_mb }} MB in total.';
        else files.push(f);
      });
      say(problem); sync();
    });
    document.getElementById('supportForm').addEventListener('submit', function () { sync(); });
  })();
</script>
{% endblock %}