{% extends "layout.html" %}
{% block title %}Edit {{ resource['title'] }}{% endblock %}
{% block head %}
  <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" crossorigin="anonymous">
{% endblock %}
{% block breadcrumb_items %}
  <li class="breadcrumb-item"><a href="{{ base_path }}/">ATGU</a></li>
  <li class="breadcrumb-item"><a href="{{ base_path }}/resources">Resources</a></li>
  <li class="breadcrumb-item"><a href="{{ base_path }}/resources/{{ resource['id'] }}">{{ resource['title'] }}</a></li>
  <li class="breadcrumb-item active" aria-current="page">Edit</li>
{% endblock %}
{% block container_contents %}
    <form id="resource-form" action="{{ base_path }}/resources/{{ resource['id'] }}/edit" method="post" enctype="multipart/form-data">
      <input type="hidden" name="_csrf" value="{{ csrf_token }}">
      
        <div class="row my-2">
          <div class="col-sm-12 col-md-2">
            Title:
          </div>
          <div class="col-sm-12 col-md-10">
            <input name="title" type="text" value="{{ resource['title'] }}" style="width:50%;" />
          </div>
        </div>

        <div class="row my-2">
          <div class="col-sm-12 col-md-2">
            Description:
          </div>
          <div class="col-sm-12 col-md-10">
            <textarea name="description" style="width:100%;" rows="3">{{ resource['description'] }}</textarea>
          </div>
        </div>

        <div class="row my-2">
          <div class="col-sm-12 col-md-2">
            Contents:
          </div>
          <div class="col-sm-12 col-md-10">
            <div>
              <div id="editor"></div>
            </div>
          </div>
        </div>

        <input id="contents-input" name="contents" type="hidden" />

        <div class="row my-2">
          <div class="col-sm-12 col-md-2">
            <div>Tags:</div>
            <div style="line-height:1.2;"><small class="text-secondary">comma separated</small></div>
          </div>
          <div class="col-sm-12 col-md-10">
            <input name="tags" type="text" value="{{ resource['tags'] }}" style="width:40%" />
          </div>
        </div>

        <div class="row my-2">
          <div class="col-sm-12 col-md-2">
            <div>Attachments:</div>
          </div>
          <div class="col-sm-12 col-md-10">
            <div id="files-div">
              {% for attachment_id, filename in resource['attachments'].items() %}
              <div class="my-1">
                <input name="attachment" value="{{ attachment_id }}" type="checkbox" class="form-check-input" checked />
                <a href="{{ base_path }}/resources/{{ resource['id'] }}/attachments/{{ attachment_id }}">
                  {{ filename }}
                </a>
              </div>
              {% endfor %}
              <div class="my-1">
                <input name="file" type="file" />
              </div>
            </div>
            <div>
              <span id="add-file" class="py-1">
                <span class="material-icons" style="vertical-align:middle;">add_box</span> Another File
              </span>
            </div>
          </div>
        </div>

        <div class="ml-3">
          <button type="submit" class="btn btn-primary mr-3">Update</button>
          <a role="button" class="btn btn-secondary" href="{{ base_path }}/resources/{{ resource['id'] }}">Cancel</a>
        </div>

    </form>
{% endblock %}
{% block before_body_end %}
  <script src="https://cdn.quilljs.com/1.3.6/quill.js" crossorigin="anonymous"></script>
  <script>
    const editorOptions = {
        theme: 'snow'
    };

    const editor = new Quill('#editor', editorOptions);

    editor.setContents({{ resource['contents']|tojson }});

    const resourceForm = document.getElementById("resource-form");
    const contentsInput = document.getElementById("contents-input");
    resourceForm.onsubmit = function(event) {
        contentsInput.value = JSON.stringify(editor.getContents())
    }

    function parseHTML(text) {
        let dummy = document.createElement('div');
        dummy.innerHTML = text.trim()
        return dummy.firstChild
    }

    const addFile = document.getElementById("add-file");
    const filesDiv = document.getElementById("files-div");
    addFile.onclick = function(event) {
        const newFileDiv = 
        filesDiv.appendChild(
            parseHTML(`
<div class="my-1">
<input name="file" type="file" />
</div>`));
    }
  </script>
{% endblock %}