{% extends "layout_bs4.html" %}

{% block title %}
  {{ super() }} - {{ panel.institute.display_name }} - {{ panel.display_name }}
{% endblock %}

{% block css %}
{{ super() }}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">
{% endblock %}

{% block content_main %}
  <div class="container-float">
    <form action="{{ url_for('panels.gene_edit', panel_id=panel._id, hgnc_id=gene.hgnc_id) }}" method="POST">
      {{ form.csrf_token }}
      <div class="card panel-default mt-3">
        <div class="panel-heading">
          Edit {{ gene.hgnc_symbol }} for {{ panel.display_name }}
        </div>
        <div class="card-body">
          <div class="form-group">
            <div class="row">
              <div class="col-md-4">
                {{ form.disease_associated_transcripts.label(class="control-label") }}<br>
                {{ form.disease_associated_transcripts(class="selectpicker") }}
              </div>
              <div class="col-md-4">
                {{ form.reduced_penetrance.label(class="control-label") }}
                (OMIM: {{ 'Yes' if gene.incomplete_penetrance else 'unknown' }})
                <div>{{ form.reduced_penetrance() }}</div>
              </div>
              <div class="col-md-4">
                {{ form.mosaicism.label(class="control-label") }}
                <div>{{ form.mosaicism() }}</div>
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="row">
              <div class="col-md-4">
                {{ form.inheritance_models.label(class="control-label") }}<br>
                {{ form.inheritance_models(class="selectpicker") }}
              </div>
              <div class="col-md-4">
                {{ form.custom_inheritance_models.label(class="control-label") }}
                {{ form.custom_inheritance_models(class="form-control") }}
              </div>
              <div class="col-md-4">
                {{ form.database_entry_version.label(class="control-label") }}
                (ex: 1.2)
                {{ form.database_entry_version(class="form-control") }}
              </div>
            </div>
            <div class="row mt-3">
              <div class="col-md-12">
                {{ form.comment.label(class="control-label") }}
                {{ form.comment(class="form-control") }}
              </div>
            </div>
          </div>
        </div>
        <div class="card-footer">
          <div class="row">
            <div class="col text-center">
              <div class="btn-group" style="width:50%;">
                <a class="btn btn-outline-secondary" href="{{ url_for('panels.panel', panel_id=panel._id) }}">Cancel</a>
                <button class="btn btn-primary" type="submit">Save</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>
  </div>
{% endblock %}

{% block scripts %}
  {{ super() }}
  <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>
  <script>
    $(function () {
      $('select[multiple]').multiselect({
        buttonWidth: '100%'
      });
    })
  </script>
{% endblock %}
