<!-- Help message -->
<div class="ui message">
  <i class="close icon"></i>

  <!-- Label config -->
  <div class="header">Labeling configuration help</div>
  <div class="content">
    <ul class="ui list">
      <li>Labeling interface is based on html-like tags, read more in our
        <a href="https://labelstud.io/tags" target="_blank">documentation</a>.
      </li>
      <li>You can fully customize the appearance and workflow by modifying Labeling Config.</li>
      <li>Tag values can use variables that start with "$" sign,
        and those correspond to the fields in imported tasks from JSON or CSV files.
      </li>
    </ul>
  </div>
  <br/>

  {% if multi_session %}
  <div class="header">Reset everything and start a new project</div>
  <div class="content">
    <button onclick="new_project()" id="new-project-button"
            class="ui button negative basic" style="height: 24px; padding-top: 5px;">
      Start new project
    </button>
  </div>
  <br>
  {% endif %}

  <!-- Templates -->
  <div class="header">Try predefined configs</div>
  <div class="content" style="margin-top: 0">
    <!-- Templates categories -->
    <div class="ui grid stackable" style="margin: 0 auto;">
      {% for category in templates %}
        <div class="four wide column category">
          {% if category == 'audio' %} <i class="icon sound"></i> {% endif %}
          {% if category == 'text' %} <i class="icon font"></i> {% endif %}
          {% if category == 'html' %} <i class="icon code"></i> {% endif %}
          {% if category == 'image' %} <i class="icon image"></i> {% endif %}

          <!-- Template -->
          {% for t in templates[category] %}
            <div class="ui item">
              <a class="use-template no-go" href="#" data-value="{{ t.pk }}">{{ t.title }}</a>
            </div>
          {% endfor %}
        </div>
      {% endfor %}
    </div>

  </div>
</div>

<br/>

<script>
  function new_project() {
    let yes = confirm("You will lose ALL YOUR DATA, this action CAN'T BE UNDONE.\nAre you sure?");
    if (yes) {
      let request = new XMLHttpRequest();
      request.open("POST", "/api/project/?new=true", true);
      request.onload = function () {
        window.location.reload();
      };
      request.send(null);
    }
  }
</script>