{% extends "layout.html" %}
{% block title %}{{ 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 active" aria-current="page">{{ resource['title'] }}</li>
{% endblock %}
{% block container_contents %}
  <div class="row">
    <div class="col">
      <div style="float:right;">
        <form action="{{ base_path }}/resources/{{ resource['id'] }}/edit" class="pr-3" style="display:inline;">
          <button type="submit" class="btn btn-primary">Edit</button>
        </form>

        <form action="{{ base_path }}/resources/{{ resource['id'] }}/delete" method="post" style="display:inline;">
          <input type="hidden" name="_csrf" value="{{ csrf_token }}">
          <button type="submit" class="btn btn-danger">Delete</button>
        </form>
      </div>
    </div>
  </div>

  <h2 class="my-0">{{ resource['title'] }}</h2>

  <p><small class="text-secondary" style="line-height:1.2;">{{ resource['tags'] }}</small></p>

  <p>{{ resource['description'] }}</p>

  <div class="mb-3">
    <div id="contents"></div>
  </div>

  {% if resource['attachments'] is not none and resource['attachments']|length > 0 %}
    <h5>Attachments</h5>
    <div id="files-div" class="pl-3">
      {% for attachment_id, filename in resource['attachments'].items() %}
        <div class="my-1">
          <a href="{{ base_path }}/resources/{{ resource['id'] }}/attachments/{{ attachment_id }}">
            {{ filename }}
          </a>
        </div>
      {% endfor %}
    </div>
  {% endif %}
{% endblock %}
{% block before_body_end %}
  <script src="https://cdn.quilljs.com/1.3.6/quill.js" crossorigin="anonymous"></script>
  <script>
    const contentsOptions = {
        readOnly: true,
        modules: {
            toolbar: false
        },
        theme: 'snow'
    };

    const contents = new Quill('#contents', contentsOptions);
    contents.setContents({{ resource['contents']|tojson }});
  </script>
{% endblock %}