{% extends 'layouts/left_panel.html' %}
{% block heading %}

<div class="row screen-only">
  <div class="col-md-12">
    <h1 >
      <div class="btn-group pull-left" dropdown is-open="status.isopen">
        <button type="button" class="btn btn-secondary dropdown-toggle" ng-disabled="disabled">
          <i class="fa fa-user-md"></i>
          [[ tag_display[currentTag] ]] / [[ tag_display[currentSubTag] ]]
          <i class="fa fa-angle-down"></i>
        </button>
        <ul class="dropdown-menu slides" role="menu">
          {% for team in teams %}
          {% if team.visible_in_list %}
          {% if not team.has_subteams or team.parent %}
          <li ng-hide="currentTag == '{{ team.name }}' || currentSubTag == '{{ team.name }}'">
            <a href="#/list/{% if team.parent %}{{ team.parent.name }}/{{ team.name }}{% else %}{{ team.name }}{% endif %}">
              {% if team.parent %}
              {{ team.parent.title }} /
              {% endif %}
              {{ team.title }}
            </a>
          </li>
          {% endif %}
          {% endif %}
          {% endfor %}
        </ul>
      </div>
      {% if not user.profile.explicit_access_only %}
      	  <button class="btn btn-primary pull-right"
              ng-show="!profile.readonly"
              ng-click="addEpisode()">
            <i class="glyphicon glyphicon-plus"></i>
            Add Patient
          </button>
      {% endif %}
    </h1>
  </div>
</div>


{% endblock %}

{% block left_panel %}
<div class="panel panel-active screen-only" ng-show="episode">
  <div class="panel-heading">
    <b>
      <i class="fa fa-user"></i>
      <span ng-show="profile.can_see_pid()">
        [[ episode.demographics[0].name ]]
      </span>
    </b>
    {% if request.user.is_staff %}
    <br>
      <a href="/adminopal/episode/[[ episode.id ]]/" target="_blank">
        <i class="fa fa-cogs"></i>
        Admin
      </a>
    {% endif %}
  </div>
  <ul class="list-group">
    <li class="list-group-item" ng-show="profile.can_see_pid()">
      <p>
        <a class="btn btn-secondary screen-only btn-sm" ng-href='[[ "#/episode/" + episode.id ]]'>
          <i class="fa fa-search-plus"></i>
          Patient Details
        </a>
      </p>
    </li>
    <li class="list-group-item" ng-show="profile.can_see_pid()">
      {% with edit_teams="editNamedItem(episode, 'tagging', 0)" %}
      {% include 'partials/_teams_list.html' %}
      {% endwith %}
    </li>
    <li class="list-group-item">
      {% include 'partials/_episode_actions.html' %}
    </li>
  </ul>
</div>
<div class="panel panel-default screen-only"
     ng-hide="!profile.can_see_pid()"
     >
  <div class="panel-heading">
    <h4>
      <i class="fa fa-filter"></i>
      Filters
    </h4>
  </div>
  <div class="panel-body">
    <p>
	  <input class="form-control" ng-model="query.hospital_number"
             ui-event="{focus: 'focusOnQuery()', blur: 'blurOnQuery()'}"
             type="text" class="input-small" placeholder="Hospital #">
	  <input class="form-control" ng-model="query.name" ui-event="{focus: 'focusOnQuery()', blur: 'blurOnQuery()'}"
             type="text" class="input-small" placeholder="Name">
    </p>
  </div>
</div>

{% endblock %}


{% block content %}
<h4 class="print-only">
  [[ tag_display[currentTag] ]] / [[ tag_display[currentSubTag] ]]
</h4>

<div class="patient-list-container" freeze-headers fix-height>
  <table class="table table-bordered bg-white patient-list">
    <thead class="table-header">
  	<tr>
  	  {% for column in columns %}
  	  <th>
          <i class="{{ column.icon }}"></i>
          {{ column.title }}
        </th>
  	  {% endfor %}
  	</tr>
    </thead>
    <tbody>
  	<tr ng-repeat="row in rows"
          ng-click="select_episode(row, $index)"
          ng-class="{selected: episode.id == row.id}"
          blur-others="episode.id == row.id"
          scroll-episodes="isSelectedEpisode"
          scroll-container=".patient-list-container"
          >
  	  {% for column in columns %}
  	  <td ng-mouseenter="mouseEnter($index, {{ forloop.counter0 }})"
  		  ng-mouseleave="mouseLeave()"
            {% ifequal column.title "Teams" %}class="screen-only"{% endifequal %} >
  		<ul>
            {% if column.header_template_path %}
            {% include column.header_template_path %}
            {% endif %}
  		  <li ng-repeat="item in row.{{column.name}} {% if column.list_limit %} |limitTo:{{ column.list_limit }}{% endif %} track by $index"
  			  ng-click="selectItem($parent.$index, {{ forloop.counter0 }}, $index)"
  			  ng-dblclick="editItem($parent.$index, {{ forloop.counter0 }}, $index)"
  			  >
  			{% include column.template_path %}
  		  </li>

  		  {% if not column.single %}
  		  <li class="edit_item"
                ng-click="editItem($index, {{ forloop.counter0 }}, row.{{column.name}}.length)"
  			  ng-dblclick="editItem($index, {{ forloop.counter0 }}, row.{{column.name}}.length)"
  			  >
  			<span ng-show="!profile.readonly && mouseRix == $index && mouseCix == {{ forloop.counter0 }}">
  			  Add
                <i class="glyphicon glyphicon-plus pull-right"></i>
  			</span>
  			&nbsp;
  		  </li>
            {% else %}
            <li class="edit_item"
                ng-click="editItem($index, {{ forloop.counter0 }}, 0)"
  			  ng-dblclick="editItem($index, {{ forloop.counter0 }}, 0)"
  			  >
  			<span ng-show="!profile.readonly && mouseRix == $index && mouseCix == {{ forloop.counter0 }}">
  			  Edit <i class="glyphicon glyphicon-pencil pull-right"></i>
  			</span>
  			&nbsp;
  		  </li>

            {% endif %}
  		</ul>
  	  </td>
  	  {% endfor %}
  	</tr>
    </tbody>
  </table>
  <div class="empty-list" ng-hide="num_episodes > 0">
    <p class="lead text-center">
      There are no patients on this list.
    </p>
      <p class="lead text-center">
        <span class="screen-only">
        Would you like to <a href="" ng-click="addEpisode()">add one</a>?
        </span>
      </p>
    </span>
  </div>
</div>

<footer class="text-center keyboard-shortcuts screen-only">
    <a class="pointer screen-only" ng-click="keyboard_shortcuts($event)">
      <i class="fa fa-keyboard-o"></i> Keyboard shortcuts available
    </a>
</footer>



{% endblock %}

{% block footer %}

{% include 'keyboard_shortcuts_modal.html' %}


{% endblock %}
