{% extends "base.html" %}

{% block title %}{% trans "page title" %}Report a bug{% endtrans %} | LibreQDA{% endblock %}

{% block contents %}
<div class="container py-4" style="max-width: 720px;">
  <div class="card shadow-sm">
    <div class="card-body">
      <h1 class="h4 mb-3">{% trans "bug report page heading" %}Report a bug{% endtrans %}</h1>

      {% if message %}
      <div class="alert alert-success">{{ message }}</div>
      {% endif %}
      {% if error %}
      <div class="alert alert-danger">{{ error }}</div>
      {% endif %}

      <p class="text-muted">{% trans %}Found a bug? Describe what happened below and it will be emailed to the LibreQDA team.{% endtrans %}</p>
      <form action="{{ reverse_url('bug_report') }}" method="post" enctype="multipart/form-data">
        {{ xsrf_form_html() }}
        <div class="form-group mb-3">
          <label for="description">{% trans "bug report form label" %}What happened?{% endtrans %}</label>
          <textarea class="form-control" id="description" name="description" rows="6" required placeholder="{% trans "bug report description placeholder" %}Example: When I delete a colored coding stripe, it doesn't disappear from my screen. Refreshing the page doesn't help. I'm using LibreQDA on Firefox, and I can reproduce this in one specific document (my_document.pdf).{% endtrans %}">{{ description }}</textarea>
        </div>
        <div class="form-group mb-3">
          <label for="project_id">{% trans "bug report form label for project" %}Project{% endtrans %}</label>
          {% if projects %}
          <select class="form-select" id="project_id" name="project_id" required>
            <option value="" {% if not project_id %}selected{% endif %} disabled>{% trans "bug report project select placeholder" %}Select a project…{% endtrans %}</option>
            <option value="all" {% if project_id == "all" %}selected{% endif %}>{% trans "bug report all projects option" %}All projects (general issue){% endtrans %}</option>
            {% for p in projects %}
            <option value="{{ p.id }}" {% if project_id == p.id|string %}selected{% endif %}>{{ p.name }} (#{{ p.id }})</option>
            {% endfor %}
          </select>
          {% else %}
          <input type="text" class="form-control" id="project_id" name="project_id" value="{{ project_id }}" required placeholder="{% trans "bug report project id placeholder" %}Find it in your browser's address bar: https://www.libreqda.org/project/...{% endtrans %}" />
          {% endif %}
        </div>
        <div class="form-group mb-3">
          <label for="email">{% trans "bug report form label for email address" %}Your email (optional, in case we need to follow up){% endtrans %}</label>
          <input type="text" class="form-control" id="email" name="email" value="{{ email }}" />
        </div>
        <div class="form-group mb-3">
          <label>{% trans "bug report form label for screenshot" %}Screenshots (optional, up to 5, images only, max 15 MB each){% endtrans %}</label>
          <div id="screenshot-dropzone" class="text-center p-4" style="border: 2px dashed #aaa; border-radius: 4px; cursor: pointer;">
            <p id="screenshot-dropzone-text" class="mb-0 text-muted">{% trans %}Drag & drop images here, or click to choose files{% endtrans %}</p>
            <input type="file" id="screenshot" name="screenshot" accept="image/*" multiple style="display: none;" />
          </div>
          <ul id="screenshot-list" class="list-unstyled mt-2 mb-0 d-none"></ul>
        </div>
        <div class="d-flex justify-content-between align-items-center mt-4">
          <a href="{{ reverse_url('index') }}" class="btn btn-outline-secondary">{% trans "bug report form cancel button" %}Cancel{% endtrans %}</a>
          <button type="submit" class="btn btn-primary">{% trans "bug report form submit button" %}Send{% endtrans %}</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script type="text/javascript">
(function() {
  var select = document.getElementById('project_id');
  if (!select || select.tagName !== 'SELECT') { return; }
  if (select.value) { return; }
  var m = (document.referrer || '').match(/\/project\/(\d+)(?:[\/?#]|$)/);
  if (!m) { return; }
  var wanted = m[1];
  for (var i = 0; i < select.options.length; ++i) {
    if (select.options[i].value === wanted) {
      select.value = wanted;
      return;
    }
  }
})();
</script>

<script type="text/javascript">
(function() {
  var dropzone = document.getElementById('screenshot-dropzone');
  var text = document.getElementById('screenshot-dropzone-text');
  var input = document.getElementById('screenshot');
  var list = document.getElementById('screenshot-list');

  var MAX_FILES = 5;
  var files = [];

  function fileKey(f) { return f.name + '\0' + f.size + '\0' + f.lastModified; }

  function sync() {
    var dt = new DataTransfer();
    files.forEach(function(f) { dt.items.add(f); });
    input.files = dt.files;
    render();
  }

  function render() {
    list.innerHTML = '';
    if (!files.length) {
      list.classList.add('d-none');
      return;
    }
    list.classList.remove('d-none');
    files.forEach(function(f, idx) {
      var li = document.createElement('li');
      li.className = 'd-flex align-items-center justify-content-between border rounded px-2 py-1 mb-1';
      var name = document.createElement('span');
      name.className = 'text-truncate me-2';
      name.textContent = f.name;
      var btn = document.createElement('button');
      btn.type = 'button';
      btn.className = 'btn-close';
      btn.setAttribute('aria-label', '{% trans %}Remove{% endtrans %}');
      btn.addEventListener('click', function() {
        files.splice(idx, 1);
        sync();
      });
      li.appendChild(name);
      li.appendChild(btn);
      list.appendChild(li);
    });
  }

  function addFiles(added) {
    for (var i = 0; i < added.length && files.length < MAX_FILES; ++i) {
      var f = added[i];
      var key = fileKey(f);
      if (files.some(function(existing) { return fileKey(existing) === key; })) {
        continue;
      }
      files.push(f);
    }
    sync();
  }

  dropzone.addEventListener('click', function(event) {
    if (event.target.closest('#screenshot-list')) return;
    input.click();
  });
  input.addEventListener('change', function() {
    addFiles(input.files);
  });
  dropzone.addEventListener('dragover', function(event) {
    event.preventDefault();
    dropzone.style.background = '#f0f0f0';
  });
  dropzone.addEventListener('dragleave', function() {
    dropzone.style.background = '';
  });
  dropzone.addEventListener('drop', function(event) {
    event.preventDefault();
    dropzone.style.background = '';
    if (event.dataTransfer.files && event.dataTransfer.files.length) {
      addFiles(event.dataTransfer.files);
    }
  });
})();
</script>
{% endblock %}