{% if not standalone %}{% extends "base.html" %}{% else %}{% extends "base_standalone.html" %}{% endif %}

{% block page_content %}

    <div class="row ">
        <div class="col-lg-9 bokeh order-2 order-xl-2 pl-0">
            <ul class="nav nav-tabs" id="myTab" role="tablist">
              <li class="nav-item">
                <a class="nav-link active" id="prospect-tab" data-toggle="tab" href="#prospect" role="tab" aria-controls="prospect" aria-selected="false">Prospect</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" id="icats-tab" data-toggle="tab" href="#icats" role="tab" aria-controls="icats" aria-selected="false">ICATS</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" id="table-tab" data-toggle="tab" href="#table" role="tab" aria-controls="datatable" aria-selected="false">Table</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" id="fit-tab" data-toggle="tab" href="#fit" role="tab" aria-controls="fit" aria-selected="true">Fit</a>
              </li>
            </ul>
            <div class="tab-content" id="myTabContent">
              <div class="tab-pane fade show active" id="prospect" role="tabpanel" aria-labelledby="prospect-tab">
                  {{ bokeh_divs['prospect']|safe }}
              </div>
              <div class="tab-pane fade" id="icats" role="tabpanel" aria-labelledby="icats-tab">
                  {{ bokeh_divs['icats']|safe }}
              </div>
              <div class="tab-pane fade" id="table" role="tabpanel" aria-labelledby="table-tab">
                  <div style="overflow:scroll">
                  {{ bokeh_divs['table']|safe }}
                  </div>
              </div>
              <div class="tab-pane fade" id="fit" role="tabpanel" aria-labelledby="fit-tab">
                  <div style="overflow:scroll">
                  {{ bokeh_divs['fit']|safe }}
                  </div>
              </div>
            </div>

        </div>
        <div class="col-lg-3 order-1 order-xl-1 pr-0">

          <div id="accordion">

            <div class="card border-light">
              <div class="card-header" id="tips-header">
                <h5 class="mb-0">
                  <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#about-collapse"
                          aria-expanded="false" aria-controls="tips-collapse">
                    About
                  </button>
                </h5>
              </div>
              <div id="about-collapse" class="collapse" aria-labelledby="tips-header" data-parent="#accordion">
                <div class="card-body">
                    {% include "_info_jane.html" %}
                </div>
              </div>
            </div>

            <div class="card border-light">
              <div class="card-header" id="inputs-header">
                <h5 class="mb-0">
                  <button class="btn btn-link" data-toggle="collapse" data-target="#inputs-collapse"
                          aria-expanded="true" aria-controls="inputs-collapse">
                    Inputs
                  </button>
                </h5>
              </div>
              <div id="inputs-collapse" class="collapse show" aria-labelledby="inputs-header" data-parent="#accordion">
                  <div class="card-body">
                    <div id="input-summary">
                      <p class="text-dark font-weight-bold">{{ query_title }}</p>
                      <p class="text-sm text-justify small font-weight-light">{{ query_abstract }}</p>

                      <div id="ris-name-div">
                          <label for="ris-name" class="text-muted">References file:</label>
                          <span id="ris-name">{{ query_ris }}</span>
                      </div>

                      <div id="jane_links" class="mt-2">
                        <div id="hidden-jane-forms" style="display: none">
                            {% import 'macros.html' as macros %}
                            {{ macros.jane_form_inputs('jane-title', query_title) }}
                            {{ macros.jane_form_inputs('jane-abstract', query_abstract) }}
                        </div>
{#                        <span><i class="fas fa-external-link-alt"></i>Jane results</span>#}
                        <label for="jane-link-buttons" class="form-label text-muted">Jane results:</label>
                        <div id='jane-link-buttons' class="btn-group btn-group-sm" role="group" aria-label="Jane buttons">
                            <button form='jane-title' class="btn btn-outline-secondary" type="submit"><i class="fas fa-external-link-alt mr-1"></i>Title</button>
                            <button form='jane-abstract' class="btn btn-outline-secondary" type="submit"><i class="fas fa-external-link-alt mr-1"></i>Abstract</button>
                        </div>
                      </div>
                    
                    </div>
                  </div>
                </div>
              </div>

              <div class="card border-light">
                  <div class="card-header" id="tips-header">
                    <h5 class="mb-0">
                      <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#tips-collapse"
                              aria-expanded="false" aria-controls="tips-collapse">
                        Exploring the results
                      </button>
                    </h5>
                  </div>
                  <div id="tips-collapse" class="collapse" aria-labelledby="tips-header" data-parent="#accordion">
                    <div class="card-body">

                      {% include '_info_summary.html' %}

                      <h6 id="info-prospect-header">
                        1. <a class="collapsed" data-toggle="collapse" href="#info-prospect-collapse"
                                aria-expanded="false" aria-controls="inputs-collapse">
                          Prospect
                        </a>
                      </h6>
                      <div id="info-prospect-collapse" class="collapse" aria-labelledby="info-prospect-header">
                        {% include "_info_prospect.html" %}
                      </div>

                      <h6 id="info-icats-header">
                        2. <a class="collapsed" data-toggle="collapse" href="#info-icats-collapse"
                                aria-expanded="false" aria-controls="inputs-collapse">
                          ICATS
                        </a>
                      </h6>
                      <div id="info-icats-collapse" class="collapse" aria-labelledby="info-icats-header">
                        {% include "_info_icats.html" %}
                      </div>

                      <h6 id="info-table-header">
                        3. <a class="collapsed" data-toggle="collapse" href="#info-table-collapse"
                                aria-expanded="false" aria-controls="inputs-collapse">
                          Table
                        </a>
                      </h6>
                      <div id="info-table-collapse" class="collapse" aria-labelledby="info-table-header">
                        {% include "_info_table.html" %}
                      </div>

                      <h6 id="info-fit-header">
                        4. <a class="collapsed" data-toggle="collapse" href="#info-fit-collapse"
                                aria-expanded="false" aria-controls="inputs-collapse">
                          Fit
                        </a>
                      </h6>
                      <div id="info-fit-collapse" class="collapse" aria-labelledby="info-fit-header">
                        {% include "_info_fit.html" %}
                      </div>

                    </div>
                  </div>
              </div>

            </div>


        </div>
    </div>

{% endblock %}

{% block scripts %}
{{ super() }}
{{ bokeh_js|safe }}
{% endblock %}