{% extends "base.html" %}

{% block title %}Objective{% endblock %}

{% block head %}
  {{ super() }}
  <script src="{{url_for('static', filename='js/objective.js')}}"></script>
{% endblock %}

{% block content %}
<div class="columns is-mobile">
  <div class="column is-one-fifth">
    <aside class="menu">
      <p class="menu-label">
        General
      </p>
      <ul class="menu-list">
        <li><a class="{{'is-active' if is_year else '' }}" href="/objective/year"><span class="icon"><i class="fas fa-bullseye"></i></span>Year</a></li>
      </ul>
      <p class="menu-label">
        Okr's  
        <a class="is-pulled-right" onclick="Tona.Modal.Show('modal-add-objective')"><span class="icon"><i class="fas fa-plus"></i></span></a>
      </p>
      <ul id="objective-menu-list" class="menu-list">
        {% for row in objectives %}
          <li><a class="{{'is-active' if is_objective and objective.id == row.id else '' }}" href="/objective/{{row.id}}">{{row.name}}</a></li>
        {% endfor %}
      </ul>
    </aside>
    
    <div id="modal-add-objective" class="modal">
      <div class="modal-background"></div>
      <div class="modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title">Add Objective</p>
          <button class="delete" aria-label="close"></button>
        </header>
        <section class="modal-card-body">
          <input id="objetive-name" type="text" class="input is-primary" placeholder="Objective name"/>
          <div class="columns">
            <div class="column">
              <div class="field">
                <label class="label">Start</label>
                <div class="control">
                  <input id="objetive-start" type="date" class="input"/>
                </div>
              </div>
            </div>
            <div class="column">
              <div class="field">
                <label class="label">Due</label>
                <div class="control">
                  <input id="objetive-due" type="date" class="input"/>
                </div>
              </div>
            </div>
          </div>
        </section>
        <footer class="modal-card-foot">
          <button class="button is-success" onclick="Objective.AddObjective()">Save changes</button>
          <button class="button">Cancel</button>
        </footer>
      </div>
    </div>

  </div>
  <div class="column">

    {% if is_year %}
    <aside class="menu">
      <ul class="menu-list">
        {% for row in objectives.keys() %}
          <li>
            <a class="is-active">{{row.name}}</a>
            <ul>
              {% for row2 in objectives[row] %}
                <li><a href="/objective/{{row.id}}/keyresult/{{row2.id}}">{{row2.name}}</a></li>
              {% endfor %}
            </ul>
          </li>
        {% endfor %}
      </ul>
    </aside>

    {% endif %}
    {% if is_objective %}
    <div class="control mb-5">
      <input id="task-name" class="input is-small" type="text" 
            onkeypress="Objective.AddKeyResult(event)"
            data-objective-id="{{objective.id}}"
            data-objective-start="{{objective.start}}"
            data-objective-due="{{objective.due}}"
            placeholder="Add key result to '{{objective.name}}', press Enter to save.">
    </div>
    <aside class="menu">
      <ul id="objective-key-menu-list" class="menu-list">
        {% for row in keyresults %}
        <li>
          <a class="{{ 'is-active' if is_keyresult and keyresult.id == row.id else '' }}" href="/objective/{{row.objective_id.id}}/keyresult/{{row.id}}">
            {{row.name}}
            <span class="is-pulled-right ml-2">
              50%
            </span>
            <span class="is-pulled-right">
              track-off
            </span>
          </a>
        </li>
        {% endfor %}
      </ul>
    </aside>
    {% endif %}
  </div>
  <div class="column">
    {% if is_keyresult %}

    <div class="columns">
      <div class="column">
          
        <input onchange="Objective.EditKeyResult(event,{{keyresult.id}},'start')" class="input is-small is-inline" value="{{keyresult.start}}" type="date" title="Start"/>
        <input onchange="Objective.EditKeyResult(event,{{keyresult.id}},'due')" class="input is-small is-inline" value="{{keyresult.due}}" type="date" title="Due"/>
          
          <!-- Start Widget Timer-->
          <div class="is-pulled-right mr-4 widget-time-entry" data-res-model="{{keyresult._meta.table_name}}" data-res-id="{{keyresult.id}}">
            <span class="time-entry-duration">00:00:00</span>
            <a class="is-primary start-time-entry" title="Start time entry">
              <span class="icon is-small">
                <i class="fas fa-clock"></i>
              </span>
            </a>
            <a class="stop-time-entry is-hidden is-danger" title="Stop time entry">
              <span class="icon is-small">
                <i class="fas fa-stop"></i>
              </span>
            </a>
          </div>
          <!-- End Widget Timer-->
      </div>  
    </div>
    <div class="columns">
      <div class="column">
        <input onblur="Objective.EditKeyResult(event,{{keyresult.id}},'name')" class="input is-small" type="text" placeholder="What is your Key Result?" value="{{keyresult.name }}">
      </div>
    </div>
    <div class="columns">
      <div class="column">
        <label class="is-block">Unit to measure</label>
        <input onclick="Objective.EditKeyResult(event,{{keyresult.id}},'metric_measure')" type="button" class="button is-small {{'is-primary' if keyresult.metric_measure == 'percent' else '' }}" value="percent"/>
        <input onclick="Objective.EditKeyResult(event,{{keyresult.id}},'metric_measure')" type="button" class="button is-small {{'is-primary' if keyresult.metric_measure == 'number' else '' }}" value="number"/>
        <input onclick="Objective.EditKeyResult(event,{{keyresult.id}},'metric_measure')" type="button" class="button is-small {{'is-primary' if keyresult.metric_measure == 'currency' else '' }}" value="currency"/>
      </div>
      <div class="column">
        <label class="is-block">Type of progression</label>
        <input onclick="Objective.EditKeyResult(event,{{keyresult.id}},'changes_metric')" type="button" class="button is-small {{ 'is-primary' if keyresult.changes_metric == 'increasing' else '' }}" value="increasing"/>
        <input onclick="Objective.EditKeyResult(event,{{keyresult.id}},'changes_metric')" type="button" class="button is-small {{ 'is-primary' if keyresult.changes_metric == 'decreasing' else '' }}" value="decreasing"/>
      </div>
    </div>
    <div class="columns">
      <div class="column">
        <label class="">Start</label>
        <input onblur="Objective.EditKeyResult(event,{{keyresult.id}},'start_target')" type="number" class="input is-small" value="{{keyresult.start_target}}"/>
      </div>
      <div class="column">
        <label class="">Target</label>
        <input onblur="Objective.EditKeyResult(event,{{keyresult.id}},'end_target')" type="number" class="input is-small" value="{{keyresult.end_target}}"/>
      </div>
    </div>

    <div id="objective-keyreuslt-tabs" class="columns">
      <div class="column">
        <div class="tabs is-small">
          <ul data-tabs-group="objective-keyreuslt">
            <li class="is-active"><a data-tab-id="checkin">Check In</a></li>
            <li><a onclick="Objective.LoadCheckin(event,{{keyresult.id}})" data-tab-id="history">History</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div id="objective-keyreuslt-checkin" data-tabs-group-id="objective-keyreuslt">
      <article class="media">
        <div class="media-content">
          <div class="field">
            <p class="control">
              <textarea id="objective-keyreuslt-checkin-comment" class="textarea" rows="3" placeholder="Add a comment..."></textarea>
            </p>
          </div>
          <nav class="level">
            <div class="level-left">
              <div class="level-item">
                <a class="button is-info" onclick="Objective.AddCheckin(event, {{keyresult.id}})">Submit</a>
              </div>
            </div>
          </nav>
        </div>
      </article>
    </div>

    <div id="objective-keyreuslt-history" data-tabs-group-id="objective-keyreuslt" class="is-hidden">
      
    </div>

    {% else %}
      Click title to view its detail
    {% endif %}
  </div>
</div>
{% endblock %}