{% import "edit_macros.html" as edit_macros %}
{% extends "base.html" %}

{% block body %}
{% block edit_form_prefix %}
<div class="ui segment">
<h1 class="ui header">Edit File Entity</h1>

<form class="ui form" id="edit_file_form" method="POST" action="{% if editgroup %}/editgroup/{{ editgroup.editgroup_id }}{% endif %}/file/{{ existing_ident }}/edit">
{% endblock %}
  {{ form.hidden_tag() }}

  <h3 class="ui dividing header">Editgroup Metadata</h3>
  {{ edit_macros.editgroup_dropdown(form, editgroup, potential_editgroups) }}

  <br>
  <h3 class="ui dividing header">File Metadata</h3>

  {{ edit_macros.form_field_inline(form.size, "required") }}
  {{ edit_macros.form_field_inline(form.mimetype) }}
  {{ edit_macros.form_field_inline(form.md5) }}
  {{ edit_macros.form_field_inline(form.sha1, "required") }}
  {{ edit_macros.form_field_inline(form.sha256) }}

  <br>
  <h3 class="ui dividing header">Locations (URLs)</h3>
  <i>Public web (no login/paywall) locations of this exact file (should match
  by hashes).</i>
  <br><br>
  <div class="list-group" id="url_list" name="url_list">
  {% for cform in form.urls %}
    <div class="list-group-item ui grid" style="padding-right: 1em;">
      {{ cform.hidden_tag() }}
      <div class="one wide column middle aligned center aligned" style="padding-bottom: 0px; padding-right: 0px; padding-left: 0px;">
      </div>
      <div class="three wide column" style="padding-bottom: 0px; padding-left: 0px;">
        <div class="field {% if cform.rel.errors %}error{% endif %}">
          {{ cform.rel() }}
        </div>
      </div>
      <div class="eleven wide column" style="padding-bottom: 0px;">
        <div class="field {% if cform.url.errors %}error{% endif %}">
          {{ cform.url() }}
          {{ edit_macros.form_field_errors(cform.url) }}
        </div>
      </div>
      <div class="one wide column right aligned" style="padding-bottom: 0px; padding-left: 0rem;">
        <button type="button" class="ui icon red button delete-url-button"><i class="trash icon"></i></button>
      </div>
    </div>
  {% endfor %}
  </div>
  <br>
  <button type="button" id="add-url-button" class="ui right floated icon green button" style="margin-right: 0.3rem;">
    <i class="plus icon"></i>
  </button>

  <br>
  <h3 class="ui dividing header">Releases</h3>
  <i>Usually one, but sometimes multiple Release entities (by FCID) that this
  file is a fulltext copy of.</i>
  <br><br>
  <div class="list-group" id="release_id_list" name="release_id_list">
  {% for rfield in form.release_ids %}
    <div class="list-group-item ui grid" style="padding-right: 1em;">
      <div class="one wide column middle aligned center aligned" style="padding-bottom: 0px; padding-right: 0px; padding-left: 0px;">
      </div>
      <div class="fourteen wide column" style="padding-bottom: 0px;">
        <div class="field {% if rfield.errors %}error{% endif %}">
          {{ rfield() }}
          {{ edit_macros.form_field_errors(rfield) }}
        </div>
      </div>
      <div class="one wide column right aligned" style="padding-bottom: 0px; padding-left: 0rem;">
        <button type="button" class="ui icon red button delete-release_id-button"><i class="trash icon"></i></button>
      </div>
    </div>
  {% endfor %}
  </div>
  <br>
  <button type="button" id="add-release_id-button" class="ui right floated icon green button" style="margin-right: 0.3rem;">
    <i class="plus icon"></i>
  </button>

  <br>
  <h3 class="ui dividing header">Submit</h3>
  {{ edit_macros.form_field_basic(form.edit_description) }}
  This description will be attached to the individual edit, not to the
  editgroup as a whole.
{% block edit_form_suffix %}
  <br><br>
  <input class="ui primary submit button" type="submit" value="Update File!">
  <p>
  <i>Edit will be part of the current editgroup, which needs to be submited and
  approved before the change is included in the catalog.</i>
</form>
</div>
{% endblock %}
{% endblock %}

{% block postscript %}
<script>
<!-- Form code -->
$(document).ready(function() {

  $('.ui.dropdown') .dropdown();

  var fixup_url_numbering = function(group_item) {
    items = Array.from(group_item.querySelectorAll(".list-group-item"))
    for (var i = 0; i < items.length; i++) {
      var item_el = items[i];
      input_el = item_el.querySelectorAll("input")[0];
      select_el = item_el.querySelectorAll("select")[0];
      //console.log(input_el.id);
      //console.log(select_el.id);
      input_el.id = "urls-" + i + "-url";
      input_el.name = input_el.id;
      select_el.id = "urls-" + i + "-rel";
      select_el.name = select_el.id;
      //console.log(input_el.id);
      //console.log(select_el.id);
    };
    console.log("re-named url rows up to i=" + i);
  };

  var url_list = document.getElementById('url_list');
  fixup_url_numbering(url_list);

  var url_delete_handler = function(ev) {
    row = ev.target.parentNode.parentNode;
    // I don't understand why this hack is needed; maybe because of the sortable stuff?
    if(!row.classList.contains("list-group-item")) {
        row = row.parentNode;
    }
    // console.log(row);
    console.assert(row.classList.contains("list-group-item"));
    row.parentNode.removeChild(row);
    fixup_url_numbering(url_list);
  };

  var attach_url_delete_handler = function(topthing) {
    Array.from(topthing.querySelectorAll(".delete-url-button")).forEach((el) => {
      el.addEventListener("click", url_delete_handler);
    });
  };
  attach_url_delete_handler(document);

  // XXX: really need some way to not duplicate this code from above...
  var url_template = `
  <div class="list-group-item ui grid" style="padding-right: 1em;">
      <div class="one wide column middle aligned center aligned" style="padding-bottom: 0px; padding-right: 0px; padding-left: 0px;">
      </div>
      <div class="three wide column" style="padding-bottom: 0px; padding-left: 0px;">
        <select id="urls-X-rel" name="urls-X-rel"><option selected value="web">Public Web</option><option value="webarchive">Web Archive</option><option value="repository">Repository</option><option value="social">Academic Social Network</option><option value="publisher">Publisher</option><option value="dweb">Decentralized Web</option></select>
      </div>
      <div class="eleven wide column" style="padding-bottom: 0px;">
        <input id="urls-X-url" name="urls-X-url" type="text" value="">
      </div>
      <div class="one wide column right aligned" style="padding-bottom: 0px; padding-left: 0rem;">
        <button type="button" class="ui icon red button delete-url-button"><i class="trash icon"></i></button>
      </div>
    </div>
  `;

  var add_url_button = document.getElementById("add-url-button");
  add_url_button.addEventListener("click", function(){
    url_list.insertAdjacentHTML('beforeend', url_template);
    attach_url_delete_handler(url_list.lastElementChild);
    fixup_url_numbering(url_list);
  });

  var fixup_release_id_numbering = function(group_item) {
    items = Array.from(group_item.querySelectorAll(".list-group-item"))
    for (var i = 0; i < items.length; i++) {
      var item_el = items[i];
      input_el = item_el.querySelectorAll("input")[0];
      //console.log(input_el.id);
      input_el.id = "release_ids-" + i;
      input_el.name = input_el.id;
      //console.log(input_el.id);
    };
    console.log("re-named release_id rows up to i=" + i);
  };

  var release_id_list = document.getElementById('release_id_list');
  fixup_release_id_numbering(release_id_list);

  var release_id_delete_handler = function(ev) {
    row = ev.target.parentNode.parentNode;
    // I don't understand why this hack is needed; maybe because of the sortable stuff?
    if(!row.classList.contains("list-group-item")) {
        row = row.parentNode;
    }
    // console.log(row);
    console.assert(row.classList.contains("list-group-item"));
    row.parentNode.removeChild(row);
    fixup_release_id_numbering(release_id_list);
  };

  var attach_release_id_delete_handler = function(topthing) {
    Array.from(topthing.querySelectorAll(".delete-release_id-button")).forEach((el) => {
      el.addEventListener("click", release_id_delete_handler);
    });
  };
  attach_release_id_delete_handler(document);

  // XXX: really need some way to not duplicate this code from above...
  var release_id_template = `
  <div class="list-group-item ui grid" style="padding-right: 1em;">
      <div class="one wide column middle aligned center aligned" style="padding-bottom: 0px; padding-right: 0px; padding-left: 0px;">
      </div>
      <div class="fourteen wide column" style="padding-bottom: 0px;">
        <div class="field ">
          <input id="release_ids-X" name="release_ids-X" type="text" value="" required>
        </div>
      </div>
      <div class="one wide column right aligned" style="padding-bottom: 0px; padding-left: 0rem;">
        <button type="button" class="ui icon red button delete-release_id-button"><i class="trash icon"></i></button>
      </div>
    </div>
  `;

  var add_release_id_button = document.getElementById("add-release_id-button");
  add_release_id_button.addEventListener("click", function(){
    release_id_list.insertAdjacentHTML('beforeend', release_id_template);
    attach_release_id_delete_handler(release_id_list.lastElementChild);
    fixup_release_id_numbering(release_id_list);
  });

  console.log("Page loaded");

});
</script>
{% endblock %}