<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Qibocal {{version}}</title>

    <link rel="icon" type="image/x-icon" href="/_favicon.ico?v=2.6.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>

    {% if is_static %}
    <script type="text/javascript">window.PlotlyConfig = {MathJaxConfig: 'local'};</script>
    <!-- Reading the plotly js library from online to save space (not the latest version) -->
    <!-- This is required for the report plots to remain interactive -->
    <script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    {{ css_styles }}
    {% else %}
    <link rel="stylesheet" href="/static/styles.css">
    {% endif %}

  </head>
  <body>
    <header class="navbar navbar-dark sticky-top p-0">
      <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="/"><span class="fs-4">Qibocal Reports</span></a>
      <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse"
        data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    </header>

    <div class="container-fluid">

      <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
        <div class="position-sticky pt-4 p-2 sidebar-sticky">
          <ul class="list-unstyled ps-0">
            <!-- add href timestamp, summary-->
            {% if reports %}
            <li class="mb-1">
              <buttom class="btn btn-toggle d-inline-flex align-items-center rounded border-0" data-bs-toggle="collapse"
                data-bs-target="#home-collapse" aria-expanded="true">
                Home
              </buttom>
              <div class="collapse show" id="home-collapse">
                <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                  <li><a href="#" class="link-dark d-inline-flex text-decoration-none rounded">
                      Timestamp</a></li>
                  <li><a href="#summary" class="link-dark d-inline-flex text-decoration-none rounded">
                      Summary</a></li>
                </ul>
              </div>
            </li>
            <li class="mb-1">
              <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0" data-bs-toggle="collapse"
                data-bs-target="#actions-collapse" aria-expanded="true">
                Actions
              </button>

              <div class="collapse show" id="actions-collapse">
                {% for report in reports %}
                  {% for routine in report.routines %}
                  <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                    <li><a href="#{{ routine }}" class="link-dark d-inline-flex text-decoration-none rounded">{{
                        report.get_routine_name(routine) }}</a></li>
                    {% for header, method in routine.plots %}
                    <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                      <li><a class="link-dark d-inline-flex text-decoration-none rounded"
                          href="#{{ routine }}-{{ method }}">- {{ header }}</a></li>
                    {% endfor %}
                    </ul>
                  </ul>
                  {% endfor %}
                {% endfor %}
              </div>
            </li>

            <li class="border-top my-3"></li>
            {% endif %}
            {% if not is_static %}
            <li class="mb-1">
              <button class="btn btn-toggle d-inline-flex align-items-center rounded border-0 collapsed"
                data-bs-toggle="collapse" data-bs-target="#saved-reports" aria-expanded="true">
                Saved reports
              </button>
              <div class="collapse show list-group" id="saved-reports">
                <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                  <form action="/" method="post">
                    {% for folder in folders %}
                      {% set ns = namespace(found=false) %}
                      {% for report in reports %}
                        {% if folder == report.title  %}
                          {% set ns.found=true %}
                        {% endif %}
                      {% endfor %}

                      {% if ns.found %}
                        <li>
                          <input type="checkbox" name="list_of_folders" value="{{ folder }}" checked="checked">
                          <a id="reports" href="{{ url_for('page', path=folder) }}" class="link-dark d-inline-flex text-decoration-none rounded list-group-item active">{{ folder }}</a>
                        </li>
                      {% else %}
                        <li>
                          <input type="checkbox" name="list_of_folders" value="{{ folder }}">
                          <a id="reports" href="{{ url_for('page', path=folder) }}" class="link-dark d-inline-flex text-decoration-none rounded list-group-item">{{ folder }}</a>
                        </li>
                      {% endif %}
                    {% endfor %}

                  </ul>
                  <hr>
                  <button style="background:#6400FF;color:white;margin-bottom: 10px;" type="submit" title="Select saved reports to compare" name="qq-compare" value="compare">qq-compare report</button>
                  <button style="background:#6400FF;color:white;margin-bottom: 10px;" type="submit" title="Select saved reports to combine" name="qq-compare" value="combine">create combined report</button>
                </form>
              </div>
            </li>
            {% endif %}
          </ul>

        </div>

      </nav>

      <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
      {% if reports %}
        {% for report in reports %}
          {% if report.path %}
            <div
              class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
              <h1>{{ report.title }}</h1>
              <button class="button-export" id="export-pdf">Export to pdf</button>
              <!-- <button onclick="window.print()" style="background:#6400FF;color:white;" title="Print report" name="print">Print report</button> -->
            </div>
            <p>
              Platform: {{ report.metadata.get('platform')}}<br>
              Run date: {{ report.metadata.get('date') }}<br>
              Start time (UTC): {{ report.metadata.get('start-time') }}<br>
              End time (UTC): {{ report.metadata.get('end-time') }}
            </p>
            <div id="margin">
              <h3 id="summary" style="scroll-margin-top: 2.5em;"
                class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                Summary</h3>

              <p>In the table below we show the libraries and respective versions used in {{ report.title }}.</p>

              <div class="table-responsive col-md-5 col-lg-3">
                <table class="table table-striped table-sm">
                  <thead>
                    <tr>
                      <th scope="col">Library</th>
                      <th scope="col">Version</th>
                    </tr>
                  </thead>
                  <tbody>
                    {% for library, version in report.metadata.get('versions').items() %}
                    <tr>
                      <td>{{ library }}</td>
                      <td>{{ version }}</td>
                    </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
              <h3 id="actions" class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">Actions</h3>
            </div>
            <div id="margin_iframes">
              <p id="actions">Please find below data generated by actions:</p>
              {% for routine in report.routines %}
                <div id="{{ routine }}" style="scroll-margin-top: 4em;">
                <h4
                  class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                  {{ report.get_routine_name(routine) }}</h4>
                  {% if routine.plots %}
                    {% for header, method in routine.plots %}
                        <div id="{{ routine }}-{{ method }}" style="scroll-margin-top: 4em;">
                        {% for qubit in report.qubits %}
                          <div id="{{ routine }}-{{ method }}-{{ qubit }}" style="scroll-margin-top: 4em;">
                              <h5
                                class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                                {{ header }} - Qubit {{ qubit }}</h5>
                                {% if is_static %}
                                  {% set figures, fitting_report = report.get_figure(routine, method, qubit) %}
                                  {% if "No fitting data" not in fitting_report %}
                                    {% set fitting_params= fitting_report.split('<br>') %}
                                      <div class="div-fitting">
                                        <table class="fitting-table">
                                          <thead>
                                            <tr>
                                              <th class="th_styles">qubit # / report #</th>
                                              <th class="th_styles">Fitting Parameter	</th>
                                              <th class="th_styles">Value</th>
                                            </tr>
                                          </thead>
                                          <tbody>
                                            {% for row in fitting_params %}
                                              {% if row != '' %}
                                                {% set run = row.split('|') %}
                                                {% set fparam_value = run[1].split(':') %}
                                                <tr>
                                                  <td class="td_styles">{{ run[0] }}</td>
                                                  <td class="td_styles">{{ fparam_value[0] }}</td>
                                                  <td class="td_styles">{{ fparam_value[1] }}</td>
                                                </tr>
                                              {% endif %}
                                            {% endfor %}
                                          </tbody>
                                        </table>
                                      </div>
                                  {% endif %}
                                  {{ figures }}
                                {% else %}
                                  <iframe src='{{ report.get_live_figure(routine, method, qubit) }}?_retry=0' class="gh-fit gh-fullwidth"></iframe>
                                {% endif %}
                          </div>
                        {% endfor %}
                        </div>
                    {% endfor %}
                  {% else %}
                    <p>No plots available for {{ routine.__name__ }}.</p>
                  {% endif %}
              {% endfor %}
            </div>
          {% endif %}
        {% endfor %}

      {% else %}
          {% if error %}
            <div
              class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
              <h2>Qibocal Error</h2>
            </div>
            <p>
            {{error}}
          </p>
          {% else %}
            <div
              class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
              <h2>Welcome to Qibocal live!</h2>
            </div>
            <p>
              Please select a report from the <mark>Saved reports</mark> in the sidebar .
            </p>
          {% endif %}
      {% endif %}
      </main>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
    crossorigin="anonymous"></script>

    <script>

        var exportPDFButton = document.getElementById("export-pdf");

        exportPDFButton.addEventListener("click", function() {

          document.body.classList.add("impresion");

          var doc = new jsPDF({orientation: 'landscape',});

          var iframes = document.querySelectorAll("iframe.gh-fit")
          source = ""
          for(var id = 0; id < iframes.length; id++) {
              var win = iframes[id].contentWindow
              var doc = win.document
              var html = doc.documentElement
              var body = doc.body
              var ifrm = iframes[id] // or win.frameElement
              source = source + html
          }

          print(source)

          doc.fromHTML(source, 0, 0, {
            width: 210,
            margins: {
              left: 10,
              right: 10,
              top: 10,
              bottom: 10
            }
          });

          // Guardar el PDF
          doc.save("report.pdf");
        });
    </script>


    <script>
      function fit() {
        var iframes = document.querySelectorAll("iframe.gh-fit")

          for(var id = 0; id < iframes.length; id++) {
              var win = iframes[id].contentWindow
              var doc = win.document
              var html = doc.documentElement
              var body = doc.body
              var ifrm = iframes[id] // or win.frameElement

              if(body) {
                  body.style.overflowX = "hidden" // scrollbar-jitter fix
                  body.style.overflowY = "hidden"
              }
              if(html) {
                  html.style.overflowX = "hidden" // scrollbar-jitter fix
                  html.style.overflowY = "hidden"
                  var style = win.getComputedStyle(html)
                  ifrm.width = parseInt(style.getPropertyValue("width")) // round value
                  ifrm.height = parseInt(style.getPropertyValue("height"))
              }
          }
          requestAnimationFrame(fit)
      }
      addEventListener("load", requestAnimationFrame.bind(this, fit))
    </script>

  </body>
</html>
