{% extends "base.html" %}
{% set active_page = "project" %}

{% block title %}{{ project.name }} | Taguette{% endblock %}

{% block containerclass %}container-fluid{% endblock %}

{% block contents %}
<div class="row">
  <!-- Left panel -->
  <div class="col-md-3">
    <div class="sticky-top">
      <!-- Tab selector -->
      <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item">
          <a class="nav-link" id="project-tab" data-toggle="tab" href="#project" role="tab" aria-controls="project" aria-selected="true">{# TRANSLATORS: Left pane tab, keep short #}{% trans %}Project info{% endtrans %}</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" id="documents-tab" data-toggle="tab" href="#documents" role="tab" aria-controls="documents" aria-selected="false">{# TRANSLATORS: Left pane tab, keep short #}{% trans %}Documents{% endtrans %}</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="tags-tab" data-toggle="tab" href="#tags" role="tab" aria-controls="tags" aria-selected="false">{# TRANSLATORS: Left pane tab, keep short #}{% trans %}Highlights{% endtrans %}</a>
        </li>
      </ul>

      <div class="tab-content" id="myTabContent">

        <!-- Project info and metadata -->
        <div class="tab-pane fade" id="project" role="tabpanel" aria-labelledby="project-tab">
          <form id="project-metadata-form">
            <div class="form-group">
              <label for="project-name" class="col-sm-2 col-form-label">{# TRANSLATORS: Project metadata #}{% trans %}Name{% endtrans %}</label>
              <input type="text" class="form-control" id="project-name" name="project-name" value="{{ project.name }}" required />
            </div>
            <div class="form-group">
              <label for="project-description" class="col-sm-2 col-form-label">{# TRANSLATORS: Project metadata #}{% trans %}Description{% endtrans %}</label>
              <textarea class="form-control" id="project-description" name="project-description">{{ project.description }}</textarea>
            </div>
          </form>

          {% if multiuser %}

          <p><a href="javascript:showMembers()" class="w-100 btn btn-outline-secondary" role="button">{% trans %}Manage collaborators{% endtrans %}</a></p>

          {% endif %}

          <p><a href="{{ reverse_url('export_project_sqlite', project.id) }}" class="w-100 btn btn-outline-primary" role="button">{% trans %}Export project{% endtrans %}</a></p>

          <div class="dropdown mb-3">
            <button class="w-100 btn btn-outline-primary dropdown-toggle" type="button" id="dropdown-codebook" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              {% trans %}Export codebook{% endtrans %}
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdown-codebook">
              <a href="{{ reverse_url('export_codebook_qdc', project.id) }}" class="dropdown-item">{% trans %}QDC (XML){% endtrans %}</a>
              <a href="{{ reverse_url('export_codebook_xlsx', project.id) }}" class="dropdown-item">{% trans %}Excel{% endtrans %}</a>
              <a href="{{ reverse_url('export_codebook_csv', project.id) }}" class="dropdown-item">{% trans %}CSV{% endtrans %}</a>
              <a href="{{ reverse_url('export_codebook_doc', project.id, 'html') }}" class="dropdown-item">{% trans %}HTML{% endtrans %}</a>
              <a href="{{ reverse_url('export_codebook_doc', project.id, 'docx') }}" class="dropdown-item">{% trans %}DOCX{% endtrans %}</a>
              <a href="{{ reverse_url('export_codebook_doc', project.id, 'pdf') }}" class="dropdown-item">{% trans %}PDF{% endtrans %}</a>
            </div>
          </div>

          {% if can_delete_project %}
          <p><a href="{{ reverse_url('delete_project', project.id) }}" class="w-100 btn btn-outline-danger">{% trans %}Delete project{% endtrans %}</a></p>
          {% endif %}
        </div>

        <!-- List of documents -->
        <div class="tab-pane fade show active" id="documents" role="tabpanel" aria-labelledby="documents-tab">
          <div class="row">
            <div class="col-md-12">
              <a class="btn btn-primary float-right mb-3" href="javascript:createDocument()">{% trans %}Add a document{% endtrans %}</a>
            </div>
          </div>
          <ul class="list-group list-group-flush" id="documents-list">
            <li class="list-group-item disabled">{% trans %}Loading...{% endtrans %}</li>
          </ul>
          <input type="checkbox" id="backlight" class="mt-3" /> <label for="backlight">{% trans %}Backlight{% endtrans %}</label>
        </div>

        <!-- List of tags -->
        <div class="tab-pane fade" id="tags" role="tabpanel" aria-labelledby="tags-tab">
          <div class="row">
            <div class="col-md-12 mb-3">
              <a id="load-all-tags" class="btn btn-primary float-right ml-2" href="/project/{{ project.id }}/highlights/">{% trans %}See all highlights{% endtrans %}</a>
              <a class="btn btn-primary float-right" href="javascript:createTag()">{% trans %}Create a tag{% endtrans %}</a>
            </div>
          </div>
          <ul class="list-group list-group-flush" id="tags-list">
            <li class="list-group-item disabled">{% trans %}Loading...{% endtrans %}</li>
          </ul>
        </div>

      </div>
    </div>
  </div>

  <!-- Right panel -->
  <div class="col-md-9">

    <div id="document-view" class="document-view">
      <div id="export-button" class="dropdown" style="display: none;">
        <button class="btn btn-outline-primary dropdown-toggle" type="button" id="dropdown-export" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          {% trans %}Export this view{% endtrans %}
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdown-export">
          <a href="#" class="dropdown-item" data-extension="html">{% trans %}HTML{% endtrans %}</a>
          <a href="#" class="dropdown-item" data-extension="docx">{% trans %}DOCX{% endtrans %}</a>
          <a href="#" class="dropdown-item" data-extension="pdf">{% trans %}PDF{% endtrans %}</a>
          <a href="#" class="dropdown-item" data-extension="xlsx" data-document="false">{% trans %}Excel{% endtrans %}</a>
          <a href="#" class="dropdown-item" data-extension="csv" data-document="false">{% trans %}CSV{% endtrans %}</a>
        </div>
      </div>

      <div id="document-contents">
        <p style="font-style: oblique; text-align: center;">{% trans %}Load a document on the left{% endtrans %}</p>
      </div>
    </div>

  </div>
</div>

<!-- Manage collaborators modal -->
<div class="modal" id="members-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{% trans %}Manage Collaborators{% endtrans %}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container">
          <h5>{% trans %}Add Collaborators{% endtrans %}</h5>
          <form id="members-add">
            <fieldset id="members-add-fields">
              <div class="row">
                <div class="col-md-4 form-group">
                  <input type="text" class="form-control" id="member-add-name" placeholder="{# TRANSLATORS: Project member form placeholder #}{% trans %}Username{% endtrans %}" required />
                </div>
                <div class="col-md-4 form-group">
                  <select id="member-add-privileges" class="form-control">
                    <option value="ADMIN">{# TRANSLATORS: Permissions level #}{% trans %}Full permissions{% endtrans %}</option>
                    <option value="MANAGE_DOCS">{# TRANSLATORS: Permissions level #}{% trans %}Can't change collaborators / delete project{% endtrans %}</option>
                    <option value="TAG" selected>{# TRANSLATORS: Permissions level #}{% trans %}View & make changes{% endtrans %}</option>
                    <option value="READ">{# TRANSLATORS: Permissions level #}{% trans %}View only{% endtrans %}</option>
                  </select>
                </div>
                <button type="submit" class="btn btn-info col-md-4 form-group">{% trans %}Add to project{% endtrans %}</button>
              </div>
            </fieldset>
          </form>
          <h5>{% trans %}Current Collaborators{% endtrans %}</h5>
          <form id="members-current">
          </form>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" id="members-submit" class="btn btn-primary">{% trans %}Save & Close{% endtrans %}</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">{% trans %}Cancel{% endtrans %}</button>
      </div>
    </div>
  </div>
</div>

<!-- Add document modal -->
<div class="modal" id="document-add-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <form id="document-add-form" class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{% trans %}Add a document{% endtrans %}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container">
          <div class="row">
            <div class="col-md-6 form-group">
              <input type="text" class="form-control" id="document-add-name" name="document-add-name" placeholder="{% trans %}Enter a document name{% endtrans %}" />
            </div>
            <div class="col-md-6 form-group">
              <input type="file" class="form-control-file" id="document-add-file" name="document-add-file" required />
            </div>
          </div>
          <textarea class="form-control mb-3" id="document-add-description" name="document-add-description" placeholder="{# TRANSLATORS: Document add form placeholder #}{% trans %}Description{% endtrans %}"></textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary">{% trans %}Import{% endtrans %}</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">{% trans %}Cancel{% endtrans %}</button>
      </div>
    </form>
  </div>
</div>

<!-- Change document modal -->
<div class="modal" id="document-change-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <form id="document-change-form" class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{% trans %}Edit document{% endtrans %}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="document-change-id" />
        <div class="container">
          <div class="row">
            <div class="col-md-6 form-group">
              <input type="text" class="form-control mb-3" id="document-change-name" name="document-change-name" placeholder="{# TRANSLATORS: Document change form placeholder #}{% trans %}Name{% endtrans %}" required />
            </div>
          </div>
          <textarea class="form-control" id="document-change-description" name="document-change-description" placeholder="{# TRANSLATORS: Document change form placeholder #}{% trans %}Description{% endtrans %}"></textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary">{% trans %}Save & Close{% endtrans %}</button>
        <button type="button" id="document-change-delete" class="btn btn-danger" data-dismiss="modal">{% trans %}Delete document{% endtrans %}</button>
      </div>
    </form>
  </div>
</div>

<!-- Add/change highlight modal -->
<div class="modal" id="highlight-add-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <form id="highlight-add-form" class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{% trans %}Highlight{% endtrans %}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="highlight-add-id" />
        <input type="hidden" id="highlight-add-start" />
        <input type="hidden" id="highlight-add-end" />
        <div class="container">
          <ul class="list-unstyled" id="highlight-add-tags">
            <li>{% trans %}Loading...{% endtrans %}</li>
            <li class="special-item-button"><a href="javascript:createTag()">{% trans %}Create a tag{% endtrans %}</a></li>
          </ul>
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary">{% trans %}Save & Close{% endtrans %}</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal" id="highlight-delete">{% trans %}Delete highlight{% endtrans %}</button>
      </div>
    </form>
  </div>
</div>

<!-- Add/change tag modal -->
<div class="modal" id="tag-add-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <form id="tag-add-form" class="modal-content">
      <div class="modal-header">
        <h5 id="tag-add-label-new" class="modal-title">{% trans %}New tag{% endtrans %}</h5>
        <h5 id="tag-add-label-change" class="modal-title" style="display: none;">{% trans %}Change tag{% endtrans %}</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input type="hidden" id="tag-add-id" />
        <div class="container">
          <input type="text" class="form-group" id="tag-add-path" name="tag-add-path" placeholder="{# TRANSLATORS: Tag change form #}{% trans %}Name{% endtrans %}" required />
          <textarea class="form-control" id="tag-add-description" name="tag-add-description" placeholder="{% trans %}Description{% endtrans %}"></textarea>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-info" data-dismiss="modal" id="tag-add-merge">{# TRANSLATORS: Button in tag edit window #}{% trans %}Merge...{% endtrans %}</button>
        <button type="submit" class="btn btn-primary">{% trans %}Save & Close{% endtrans %}</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal" id="tag-add-cancel">{% trans %}Cancel{% endtrans %}</button>
        <button type="button" class="btn btn-danger" data-dismiss="modal" id="tag-add-delete">{% trans %}Delete tag{% endtrans %}</button>
      </div>
    </form>
  </div>
</div>

<!-- Merge tags modal -->
<div class="modal" id="tag-merge-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <form id="tag-merge-form" class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Merge tags</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container">
          <div class="row">
            <div class="col-md-5 form-group">
              <input type="hidden" id="tag-merge-src-id" />
              <input type="text" class="form-control" id="tag-merge-src-name" disabled />
            </div>
            <div class="col-md-2 form-group">
              <label for="tag-merge-dest">into</label>
            </div>
            <div class="col-md-5 form-group">
              <select class="form-control-file" id="tag-merge-dest">
              </select>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary">Merge tags</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
      </div>
    </form>
  </div>
</div>

<!-- Spinner modal -->
<div id="spinner-modal" class="modal bd-example-modal-lg" data-backdrop="static" data-keyboard="false" tabindex="-1">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div id="spinner"></div>
    </div>
  </div>
</div>

<!-- Avoid doing requests, this is 2018 and we are good at engineering -->
<script type="text/javascript">
  var user_login = {{ user_login }};
  var project_id = {{ project.id }};
  var last_event = {{ last_event }};
  var documents = {{ documents }};
  var highlights = {};
  var tags = {{ tags }};
  var members = {{ members }};
</script>

<script type="text/javascript" src="{{ reverse_url('trans.js') }}"></script>

<!-- Should minify this but I hate NPM -->
<script type="text/javascript" src="{{ static_url('js/taguette.js') }}"></script>

<!-- "New highlight" button shown after selecting text -->
<div id="hlinfo"><a class="btn btn-outline-primary" href="javascript:createHighlight(current_selection);">{% trans %}new highlight{% endtrans %}</a></div>

{% endblock %}
