{% extends "templates/layout.html" %}

{% block stylesheets %}
<link rel="stylesheet"
      type="text/css"
      href="/assets/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" />
<link rel="stylesheet"
      href="/dist/external/selectize/css/selectize.bootstrap3.css" />
{% endblock %}

{% block top-nav %}
{% include "templates/header.html" with active="entry" %}
{% endblock %}

{% block body %}
<h2>Time Entry</h2>

<div id="post-new-entry-bar-container" class="well">
</div>

<input type="hidden" id="view-data" value="{{view-data}}" />

<div>
  <!-- Nav tabs for time entry types -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation">
        <a href="#timer" aria-controls="timer" role="tab" data-toggle="tab">Timer</a>
    </li>
    <li role="presentation">
        <a href="#total" aria-controls="total" role="tab" data-toggle="tab">Total Time</a>
    </li>
    <li role="presentation" class="active">
        <a href="#range" aria-controls="range" role="tab" data-toggle="tab">Time Range</a>
    </li>
  </ul>

  <!-- Tabbed panes for time entry types -->
  <div class="tab-content">
   <!-- Timer view content -->
    <div role="tabpanel" class="tab-pane well" id="timer">
    </div>
    <!-- Total Time view content -->
    <div role="tabpanel" class="tab-pane well" id="total">
    </div>
    <!-- Time Range view content -->
    <div role="tabpanel" class="tab-pane active well" id="range">
      <div class="row row-entry-form" id="entry-form-react-container">
        <div class="col-md-8 col-md-offset-2"></div>
      </div>
    </div>
  </div>
</div>

<h3 id="entries-for-day-date">{{entries-for-day.formatted-date}}</h3>

<div>
  <!-- Nav tab week pager -->
  <ul id="date-navigator-container" class="nav nav-tabs navbar-right" role="tablist">
    <li role="presentation">
        <a href="#date-nav" aria-controls="day" role="tab">
        <span id="date-navigator">Today</span>
        </a>
    </li>
  </ul>
  <!-- Nav tabs for time-worked views -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active">
        <a href="#week" aria-controls="week" role="tab" data-toggle="tab">Week</a>
    </li>
    <li role="presentation">
        <a href="#day" aria-controls="day" role="tab" data-toggle="tab">Day</a>
    </li>
  </ul>

  <!-- Tabbed panes for time-worked views -->
  <div class="tab-content">
   <!-- Week view content -->
    <div role="tabpanel" class="tab-pane active well" id="week">
      <div class="row activity-graphic-row">
        <div class="col-md-12" id="activity-graphic">
        </div>
      </div>
    </div>
    <!-- Day view content -->
    <div role="tabpanel" class="tab-pane well" id="day">
      <div class="row day-entry-table-row" id="day-entry-table">
      {% include "templates/day-entries-table.html" %}
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block end-of-body %}
<div id="activity-graphic-tooltip-container well">
</div>
{% endblock %}

{% block javascript %}
<script src="/dist/external/fuzzy/fuzzy.js"></script>
<script src="/assets/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<script src="/dist/external/selectize/js/standalone/selectize.min.js"></script>
<script src="/dist/cljs/timi.js"></script>
{% endblock %}