{% extends "base.html.j2" %}
{% import "materialize/wtf.html.j2" as wtf %}

{% block main_attribs %} class="service-scheme" data-service="corpus-analysis"{% endblock main_attribs %}

{% block page_content %}
<div class="container">
  <div class="row" data-corpus-id="{{ corpus.hashid }}" data-user-id="{{ corpus.user.hashid }}" id="corpus-display">
    <div class="col s12">
      <h1 id="title"><span class="corpus-title"></span></h1>
    </div>
    <div class="col s12 l8">
      <div class="card service-color-border border-darken" data-service="corpus-analysis" style="border-top: 10px solid">
        <div class="card-content">
          <span class="chip corpus-status corpus-status-color corpus-status-text white-text"></span>
          <div class="active preloader-wrapper small corpus-status-spinner">
            <div class="spinner-layer spinner-blue-only">
              <div class="circle-clipper left">
                <div class="circle"></div>
              </div>
              <div class="gap-patch">
                <div class="circle"></div>
              </div>
              <div class="circle-clipper right">
                <div class="circle"></div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col s12">
              <div class="input-field">
                <input class="corpus-description" disabled id="corpus-description" type="text">
                <label for="corpus-description">Description</label>
              </div>
            </div>

            <div class="col s12 m6">
              <div class="input-field">
                <input class="corpus-creation-date validate" disabled id="corpus-creation-date" type="text">
                <label for="corpus-creation-date">Creation date</label>
              </div>
            </div>

            <div class="col s12 m6">
              <div class="input-field">
                <input class="corpus-token-ratio validate" disabled id="corpus-token-ratio" type="text">
                <label for="corpus-token-ratio">Nr. of tokens used <sup><i class="material-icons tooltipped tiny" data-position="bottom" data-tooltip="Current number of tokens in this corpus. Updates after every analyze session.">help</i></sup></label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col s12 l4">
      <div class="card">
        <div class="card-content">
          <span class="card-title">Actions</span>
          <div class="row">
            <div class="col s12 l6" style="padding: 0 2.5px;">
              <a class="action-button btn disabled waves-effect waves-light" data-action="build-request" style="width: 100%;"><i class="nopaque-icons left">K</i>Build</a>
            </div>
            <div class="col s12 l6" style="padding: 0 2.5px;">
              <a class="action-button btn disabled waves-effect waves-light" data-action="analyze" href="{{ url_for('corpora.analyse_corpus', corpus_id=corpus.id) }}" style="width: 100%;"><i class="material-icons left">search</i>Analyze</a>
            </div>
            <div class="col s12 l6" style="padding: 5px 2.5px 0 2.5px;">
              <a class="btn waves-effect waves-light modal-trigger" href="#publishing-modal" style="width: 100%;"><i class="material-icons left">publish</i>Publishing</a>
            </div>
            <div class="col s12 l6" style="padding: 5px 2.5px 0 2.5px;">
              <a class="btn red waves-effect waves-light modal-trigger" href="#delete-modal" style="width: 100%;"><i class="material-icons left">delete</i>Delete</a>
            </div>
          </div>
          <span class="card-title">Social</span>
          <div class="row">
            <div class="col s12 l6" style="padding: 0 2.5px;">
              <a class="btn waves-effect waves-light modal-trigger" href="#invite-user-modal" style="width: 100%;"><i class="material-icons left">person_add</i>invite user</a>
            </div>
            <div class="col s12 l6" style="padding: 0 2.5px;">
              <a class="btn waves-effect waves-light modal-trigger" href="#share-link-modal" style="width: 100%;"><i class="material-icons left">link</i>Share link</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col s12">
      <div class="card">
        <div class="card-content">
          <span class="card-title" id="files">Corpus files</span>
          <div class="corpus-file-list" data-user-id="{{ corpus.user.hashid }}" data-corpus-id="{{ corpus.hashid }}"></div>
        </div>
        <div class="card-action right-align">
          <a href="{{ url_for('corpora.create_corpus_file', corpus_id=corpus.id) }}" class="btn waves-effect waves-light"><i class="material-icons left">add</i>Add corpus file</a>
        </div>
      </div>
    </div>

    <div class="col s12"></div>

    <div class="col s12">
      <div class="card">
        <div class="card-content">
          <span class="card-title" id="files">Corpus followers</span>
          <div class="corpus-follower-list" data-user-id="{{ corpus.user.hashid }}" data-corpus-id="{{ corpus.hashid }}"></div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock page_content %}

{% block modals %}
{{ super() }}
<div class="modal" id="publishing-modal">
  <div class="modal-content">
    <h4>Change your Corpus publishing status</h4>
    <p><i>Other users can only see the meta data of your corpus. The files of the corpus remain private and can only be viewed via a share link.</i></p>
    <br>
    <div class="switch">
      <label>
        private
        <input {% if corpus.is_public %}checked{% endif %} id="publishing-modal-is-public-switch" type="checkbox">
        <span class="lever"></span>
        public
      </label>
    </div>
  </div>
  <div class="modal-footer">
    <a class="modal-close waves-effect waves-green btn-flat">Close</a>
  </div>
</div>

<div class="modal" id="delete-modal">
  <div class="modal-content">
    <h4>Confirm Corpus deletion</h4>
    <p>Do you really want to delete the Corpus <b>{{ corpus.title }}</b>? All files will be permanently deleted!</p>
  </div>
  <div class="modal-footer">
    <a class="btn modal-close waves-effect waves-light">Cancel</a>
    <a class="btn modal-close red waves-effect waves-light" id="delete-modal-delete-button">Delete</a>
  </div>
</div>

<div class="modal no-autoinit" id="invite-user-modal">
  <div class="modal-content">
    <h4>Invite a nopaque user by username</h4>
    <p>
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
    <div class="row">
      <div class="col s10">
        <div class="chips no-autoinit" id="invite-user-modal-search"></div>
      </div>
      <div class="col s2">
        <br class="hide-on-med-and-down">
        <a class="btn modal-close waves-effect waves-light" id="invite-user-modal-invite-button">Invite<i class="material-icons right">send</i></a>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <a class="modal-close waves-effect waves-green btn-flat">Close</a>
  </div>
</div>

<div class="modal no-autoinit" id="share-link-modal">
  <div class="modal-content">
    <h4>Create a link to share your corpus</h4>
    <p>
      With the link other users follow your corpus directly, if it has not expired. 
      You can set different roles via the link, you can also edit them later in the menu below. 
      It is recommended not to set the expiration date of the link too far.
    </p>
    <div class="row">
      <div class="col s12 l2">
        <div class="input-field">
          <i class="material-icons prefix">badge</i>
          <select id="share-link-modal-corpus-follower-role-select">
            {% for corpus_follower_role in corpus_follower_roles %}
            <option value="{{ corpus_follower_role.name }}">{{ corpus_follower_role.name }}</option>
            {% endfor %}
          </select>
          <label>Role</label>
        </div>
      </div>
      <div class="col s12 l2">
        <div class="input-field">
          <i class="material-icons prefix">calendar_month</i>
          <input type="text" class="datepicker no-autoinit" id="share-link-modal-expiration-date-datepicker">
          <label for="expiration-date">Expiration date</label>
        </div>
      </div>
      <div class="col s12 l2">
        <br class="hide-on-med-and-down">
        <a class="btn waves-effect waves-light" id="share-link-modal-create-button">Create<i class="material-icons right">send</i></a>
      </div>

      <div class="col s12 l6">
        <div class="row hide" id="share-link-modal-output-container">
          <div class="col s9">
            <div class="input-field">
              <input disabled id="share-link-modal-output-field" readonly type="text">
            </div>
          </div>
          <div class="col s3">
            <br class="hide-on-med-and-down">
            <a class="btn-small waves-effect waves-light" id="share-link-modal-output-copy-button"><i class="material-icons left">content_copy</i>Copy</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <a class="modal-close waves-effect waves-green btn-flat">Close</a>
  </div>
</div>
{% endblock modals %}
