{% extends "base.html" %}
{% load static %}
{% load widget_tweaks %}
{% block content %}
<div id="projects_root" v-cloak>
  <section class="hero project-image">
    <div class="container">
      <div class="columns">
        <div class="column is-10 is-offset-1">
          <h1 class="title is-1 has-text-white">
            Hello, {{ user.get_username | title }}.
          </h1>
          <h2 class="subtitle is-4 has-text-white">
            I hope you are having a great day!
          </h2>
          {% if user.is_superuser %}
          <p>
            <a class="button is-medium is-primary" @click="isActive=!isActive">
              Create Project
            </a>
          </p>
          {% endif %}
        </div>
      </div>
    </div>
  </section>

  <!-- Modal card for creating project. -->
  <div class="modal" :class="{ 'is-active': isActive }">
    <div class="modal-background"></div>
    <div class="modal-card">
      <header class="modal-card-head">
        <p class="modal-card-title">Create Project</p>
        <button class="delete" aria-label="close" @click="isActive=!isActive"></button>
      </header>
      <form method="post">
        {% csrf_token %}
        <section class="modal-card-body">
          {% for hidden_field in form.hidden_fields %}
          {{ hidden_field }}
          {% endfor %}
          {% for field in form.visible_fields %}
          <div class="field">
            {{ field.label_tag }}
            <div class="control">
              {% render_field field class="input select-height" %}
            </div>
            {% if field.help_text %}
            <small class="form-text text-muted">{{ field.help_text }}</small>
            {% endif %}
          </div>
          {% endfor %}
        </section>
        <footer class="modal-card-foot pt20 pb20 pr20 pl20 has-background-white-ter">
          <button class="button is-primary">Create</button>
          <button class="button" @click="isActive=!isActive">Cancel</button>
        </footer>
      </form>
    </div>
  </div>

  <div class="modal" :class="{ 'is-active': isDelete }">
    <div class="modal-background"></div>
    <div class="modal-card">
      <header class="modal-card-head">
        <p class="modal-card-title">Delete Project</p>
        <button class="delete" aria-label="close" @click="isDelete=!isDelete"></button>
      </header>
      <section class="modal-card-body">
        Are you sure you want to delete project?
      </section>
      <footer class="modal-card-foot pt20 pb20 pr20 pl20 has-background-white-ter">
        <button class="button is-danger" @click="deleteProject()">Delete</button>
        <button class="button" @click="isDelete=!isDelete">Cancel</button>
      </footer>
    </div>
  </div>

  <section class="hero">
    <div class="container">
      <div class="columns">
        <div class="column is-10 is-offset-1">
      <div class="card events-card">
        <header class="card-header">
          <p class="card-header-title">
            [[ items.length ]] Projects
          </p>
          <div class="field card-header-icon">
            <div class="control">
              <div class="select">
                <select v-model="selected">
                  <option selected>All Project</option>
                  <option>Text Classification</option>
                  <option>Sequence Labeling</option>
                  <option>Seq2seq</option>
                </select>
              </div>
            </div>
          </div>
        </header>
        <div class="card-table">
          <div class="content">
            <table class="table is-fullwidth">
              <tbody>
                <tr v-for="project in selectedProjects">
                  <td class="pl15r">
                    <div class="thumbnail-wrapper is-vertical">
                      <img class="project-thumbnail" v-bind:src="project.image">
                    </div>
                    <div class="dataset-item__main is-vertical">
                      <div class="dataset-item__main-title">
                        <div class="dataset-item__main-title-link dataset-item__link">
                          <a v-bind:href="'/projects/' + project.id" class="has-text-black">[[ project.name ]]</a>
                        </div>
                      </div>
                      <div class="dataset-item__main-subtitle">
                        [[ project.description ]]
                      </div>
                      <div class="dataset-item__main-info">
                        <span class="dataset-item__main-update">updated <span>[[ getDaysAgo(project.updated_at) ]] days ago</span></span></div>
                    </div>
                  </td>
                  <td class="is-vertical"><span class="tag is-normal">[[ project.project_type ]]</span></td>
                  {% if user.is_superuser %}
                  <td class="is-vertical"><a v-bind:href="'/projects/' + project.id + '/docs'">Edit</a></td>
                  <td class="is-vertical"><a class="has-text-danger" @click="setProject(project)">Delete</a></td>
                  {% endif %}
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      </div>
      </div>
    </div>
  </section>

</div>
{% endblock %}
{% block footer %}
<script src="{% static 'bundle/projects.js' %}"></script>
{% endblock %}