{% extends "base.html" %}
{% block content %}
<nav class="breadcrumbs">
  <a href="{{ back_url }}">&larr; Back</a>
</nav>
<h1>Edit comment</h1>
{%- set existing_photos = (comment.photo_paths or '').split('|') | reject('equalto', '') | list -%}
<form method="post" action="/comments/{{ comment.id }}" enctype="multipart/form-data">
  <input type="hidden" name="next" value="{{ back_url }}">
  <div class="form-row">
    <label>Date
      <input type="date" name="comment_date" value="{{ comment.comment_date }}" required>
    </label>
    <label>Kind
      <select name="kind">
        {% for k in COMMENT_KINDS %}
          <option value="{{ k }}" {% if (comment.kind or '') == k %}selected{% endif %}>{{ k or '—' }}</option>
        {% endfor %}
      </select>
    </label>
  </div>
  <label>Note
    <textarea name="body" rows="8" autofocus>{{ comment.body or '' }}</textarea>
  </label>

  <fieldset class="comment-media-edit">
    <legend>Attached media</legend>

    {% if comment.audio_path %}
    <div class="media-current">
      <span class="media-label">Current audio:</span>
      <audio controls preload="none" src="/notes/{{ comment.audio_path }}"></audio>
      <label class="checkbox media-remove">
        <input type="checkbox" name="remove_audio" value="1">
        <span>Remove audio</span>
      </label>
    </div>
    {% endif %}

    {% if existing_photos %}
    <div class="media-current">
      <span class="media-label">Current photos:</span>
      <div class="comment-media-thumbs">
        {% for p in existing_photos %}
        <label class="comment-media-thumb">
          <a href="/notes/{{ p }}" target="_blank" rel="noopener" class="comment-media-thumb-link">
            <img src="/notes/{{ p }}" alt="photo" loading="lazy">
          </a>
          <span class="comment-media-thumb-remove">
            <input type="checkbox" name="remove_photos" value="{{ p }}">
            <span>remove</span>
          </span>
        </label>
        {% endfor %}
      </div>
    </div>
    {% endif %}

    <div class="media-add">
      <span class="media-label">Add audio:</span>
      <input type="file" name="audio" accept="audio/*" capture="environment">
    </div>
    <div class="media-add">
      <span class="media-label">Add photos:</span>
      <input type="file" name="photos" accept="image/*" multiple>
    </div>
  </fieldset>

  <div class="form-actions">
    <button type="submit" class="btn primary">Save</button>
    <a href="{{ back_url }}" class="btn ghost">Cancel</a>
    <button type="submit" class="btn danger small" style="margin-left:auto"
            formaction="/comments/{{ comment.id }}/delete" formnovalidate
            onclick="return confirm('Delete this note?')">Delete</button>
  </div>
</form>

<section class="section">
  <h2>Related to</h2>
  <ul class="target-list">
    {% for t in targets %}
    <li class="target-row">
      <a href="{{ t.url }}" class="chip chip-link">{{ t.type }}: {{ t.label }}</a>
      {% if t.is_primary %}<span class="chip chip-muted">primary</span>{% endif %}
      {% if targets|length > 1 %}
      <form method="post" action="/comments/{{ comment.id }}/targets/{{ t.type }}/{{ t.id }}/delete" class="inline">
        <input type="hidden" name="next" value="/comments/{{ comment.id }}/edit?next={{ back_url }}">
        <button type="submit" class="link danger" onclick="return confirm('Unlink from this {{ t.type }}?')">unlink</button>
      </form>
      {% endif %}
    </li>
    {% endfor %}
  </ul>

  <h3 class="small">Add a related item</h3>
  <form method="post" action="/comments/{{ comment.id }}/targets" class="comment-target-add">
    <input type="hidden" name="next" value="/comments/{{ comment.id }}/edit?next={{ back_url }}">
    <select name="target_type" id="ct-type" required>
      <option value="">-- type --</option>
      <option value="area">area</option>
      <option value="species">species</option>
      <option value="variety">variety</option>
      <option value="planting">planting</option>
      <option value="year">year</option>
    </select>

    <select name="target_id" id="ct-id" required>
      <option value="">-- pick type first --</option>
    </select>

    <button type="submit" class="btn small">Link</button>
  </form>
</section>

<script>
  window.CT_AREAS = {{ area_options | tojson }};
  window.CT_SPECIES = [{% for s in species_list %}{"id":{{s.id}},"name":{{s.name|tojson}}}{% if not loop.last %},{% endif %}{% endfor %}];
  window.CT_VARIETIES = [{% for v in variety_list %}{"id":{{v.id}},"name":{{v.name|tojson}},"species_name":{{(v.species_name or '')|tojson}}}{% if not loop.last %},{% endif %}{% endfor %}];
  window.CT_PLANTINGS = [{% for p in planting_list %}{"id":{{p.id}},"name":{{p.name|tojson}},"year_value":{{(p.year_value or '')|tojson}}}{% if not loop.last %},{% endif %}{% endfor %}];
  window.CT_YEARS = [{% for y in year_list %}{"id":{{y.id}},"year":{{y.year}}}{% if not loop.last %},{% endif %}{% endfor %}];
</script>
<script>
(function() {
  var typeSel = document.getElementById('ct-type');
  var idSel = document.getElementById('ct-id');
  function rebuild() {
    var t = typeSel.value;
    idSel.innerHTML = '';
    var placeholder = document.createElement('option');
    placeholder.value = '';
    placeholder.textContent = t ? '-- pick ' + t + ' --' : '-- pick type first --';
    idSel.appendChild(placeholder);
    var items = [];
    if (t === 'area') items = window.CT_AREAS.map(function(a){ return {id: a.id, label: a.path || a.name}; });
    else if (t === 'species') items = window.CT_SPECIES.map(function(s){ return {id: s.id, label: s.name}; });
    else if (t === 'variety') items = window.CT_VARIETIES.map(function(v){ return {id: v.id, label: v.name + (v.species_name ? ' (' + v.species_name + ')' : '')}; });
    else if (t === 'planting') items = window.CT_PLANTINGS.map(function(p){ return {id: p.id, label: (p.year_value ? p.year_value + ' — ' : '') + p.name}; });
    else if (t === 'year') items = window.CT_YEARS.map(function(y){ return {id: y.id, label: String(y.year)}; });
    items.forEach(function(it){
      var o = document.createElement('option');
      o.value = it.id;
      o.textContent = it.label;
      idSel.appendChild(o);
    });
  }
  typeSel.addEventListener('change', rebuild);
})();
</script>
{% endblock %}