{% extends "layout.html" %}

{% block title %}
  {{ super() }} - {{ current_user.name }} - Gene Panels
{% endblock %}

{% block top_nav %}
  {{ super() }}
  <li>
    <a href="{{ url_for('cases.index') }}">Institutes</a>
  </li>
  <li class="active">
    <span class="navbar-text">Gene Panels</span>
  </li>
{% endblock %}

{% block content_main %}
  <div class="panel panel-default">
    {% if panel_names %}
      <div class="panel-heading">Update gene panel</div>
      <div class="panel-body">
        <form class="form-horizontal" action="{{ url_for('panels.panels') }}" enctype="multipart/form-data" method="POST">
          <div class="form-group">
            <label class="col-sm-2 control-label">Panel</label>
            <div class="col-sm-10">
              <select name="panel_name" class="form-control">
                <option>Choose panel...</option>
                {% for name in panel_names %}
                  <option value="{{ name }}">{{ name }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">or...</div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">New panel</label>
            <div class="col-sm-3">
              <select name="institute" class="form-control">
                <option>Choose institute...</option>
                {% for institute in institutes %}
                  <option value="{{ institute._id }}">{{ institute.display_name }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-sm-3">
              <input type="text" name="new_panel_name" class="form-control" placeholder="Name">
            </div>
            <div class="col-sm-4">
              <input type="text" name="display_name" class="form-control" placeholder="Display name">
            </div>

          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label">CSV file</label>
            <div class="col-sm-10">
              <input type="file" name="csv_file" class="form-control" required>
              <p class="help-block">How do I format my <a href="http://www.clinicalgenomics.se/scout/user-guide/panels.html#uploading-a-new-gene-panel-version">gene panel file</a>?</p>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-default">Upload</button>
            </div>
          </div>
        </form>
      </div>
    {% else %}
      <div class="panel-body">No gene panels found.</div>
    {% endif %}
  </div>

  <div class="panel-group">
    {% for institute, panels in panel_groups %}
      <div class="panel panel-default">
          <div class="panel-heading">{{ institute.display_name }} - Panels</div>	  
          {% for panel in panels %}
            <div class="panel-group" id="accordion-{{ panel.panel_name }}">
	      <div class="panel panel-default">
		<a href="{{ url_for('panels.panel', panel_id=panel._id) }}">
                  {{ panel.display_name }}
		</a>
		<span class="label pull-right">
		  <a data-toggle="collapse" data-parent="#accordion-{{ panel.panel_name }}" href="#collapse{{ panel.panel_name}}">History</a>
		</span>
	      </div>
	      <div id="collapse{{ panel.panel_name }}" class="panel-collapse collapse in">
		<div id="panel-body">
		  <Ul>
	            {% for version in panel_versions[panel.panel_name] %}
	            <li>
		      <a href={{ url_for('panels.panel', panel_id=version._id) }}>{{ version.version }} {{ version.date.date() }} {{ version.genes|length }} genes</a>
	            </li>
	            {% endfor %}
		  </ul>
		</div>
	      </div>
	    </div>
          {% endfor %}
          </div>
      </div>
    {% endfor %}
  </div>
{% endblock %}
