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

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

  {% if report %}
  <title>{{ title }}</title>
  {% else %}
  <title>Qibocal {{report.meta["versions"]["qibocal"]}}</title>
  {% endif %}

  <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">
          {% if report %}
          <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>
              </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 task_id in report.history  %}
                <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                  <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="#{{report.routine_name(task_id)}}"> {{report.routine_name(task_id)}}</a></li>
                  </ul>
                </ul>
              {% endfor %}
            </div>
          </li>
          <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="#summary-collapse" aria-expanded="true">
              Summary
            </buttom>
            <div class="collapse show" id="summary-collapse">
              <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
                <li><a href="#summary" class="link-dark d-inline-flex text-decoration-none rounded">
                    Versions</a></li>
              </ul>
            </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">
                {% for folder in folders %}
                <li><a id="reports" href="{{ url_for('page', path=folder) }}"
                    class="link-dark d-inline-flex text-decoration-none rounded list-group-item {{ 'active' if folder == path else '' }}">{{ folder }}</a></li>
                {% endfor %}
              </ul>
            </div>
          </li>
          {% endif %}
        </ul>

      </div>

    </nav>

    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">

      {% if 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>{{ title }}</h1>
        <button class="button-export" id="export-pdf">Export to pdf</button>
      </div>
      <p>
        Platform: {{ report.meta.get('platform')}}<br>
        Run date: {{ report.meta.get('date') }}<br>
        Start time (UTC): {{ report.meta.get('start-time') }}<br>
        End time (UTC): {{ report.meta.get('end-time') }}
      </p>

      <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">
        </h3>


      {% for task_id in report.history %}
      <div id="{{report.routine_name(task_id)}}" 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.routine_name(task_id) }}</h4>
        {% for qubit in report.routine_targets(task_id) %}
        <div id="{{ routine }}-{{ iteration }}-{{ 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>


            {% set figures, fitting_report = report.plotter(report.history[task_id], qubit) %}
            {{ fitting_report }}
            {{ figures }}

            </div>
            {% endfor %}
      </div>
      {% endfor %}

      {% endif %}

      <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.meta.get('versions').items() %}
            <tr>
              <td>{{ library }}</td>
              <td>{{ version }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </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>

</body>

</html>
