{% extends "base.html" %}
{% block content %}

<body>
  <link href="https://cdn.datatables.net/v/bs5/jq-3.7.0/dt-2.2.1/b-3.2.1/fh-4.0.1/sp-2.3.3/sl-3.0.0/datatables.min.css"
    rel="stylesheet">
  <div class="jumbotron jumbotron-fluid">
    <h1 class="display-4">Studies&nbsp;&nbsp;<i class="fa fa-flask"></i></h1>
    <p class="lead">Select a study to see details.</p>
  </div>
  <hr class="my-4">
  <div class="container">
    <form class="form" method="post">
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="study-addon">Study</span>
        </div>
        <select class="form-select" id="inputStudy" name="inputStudy" aria-describedby="study-addon"
          onchange="this.form.submit()">
          <option disabled {% if not selected_study %}selected{% endif %}>Select a study...</option>
          {% for k, v in data_dict["appointment_study"].items() %}
          <option {% if selected_study==k %}selected{% endif %} value="{{ k }}">{{ v }}</option>
          {% endfor %}
        </select>
      </div>
    </form>
  </div>
  {% if selected_study %}
  <div class="div-center">
    <div class="card card-plot">
      <div class="card-title">Appointments</div>
      <div class="card-body">
        <canvas id="studies1" width="850" height="500">
          <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
          <script
            src="https://cdn.jsdelivr.net/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>
          <script type="text/javascript" src="{{ url_for('static', filename='js/functions.js') }}"></script>
          <script>
            dateLinePlot(
              {{ data["date_labels"] | safe }},
              {{ data["date_values"] | safe }},
              "studies1",
              "#4BC0C0",
              "Date created"
            );
          </script>
        </canvas>
      </div>
    </div>
  </div>
  <div class="div-center">
    <div class="card">
      <h5 class="card-title">Appointments: {{ data_dict["appointment_study"][selected_study] }}</h5>
      <div class="card-body">
        <h6 class="card-subtitle mb-2 text-muted">Click IDs to see a participant's profile</h6>
        <div width="10%">{{ data["table"]|safe }}</div>
      </div>
    </div>
  </div>
  {% endif %}
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <script
    src="https://cdn.datatables.net/v/bs5/jq-3.7.0/dt-2.2.1/b-3.2.1/fh-4.0.1/sp-2.3.3/sl-3.0.0/datatables.min.js"></script>
  <script type="text/javascript" src="{{ url_for('static', filename='js/tables.js') }}"></script>
  <script>
    let table = new dt("#apttable", searchCols = [3, 4], hideCols = [2, 6, 7, 8, 9, 10], statusCol = 4)

    table.on('click', 'td', function (e) {
      let tr = e.target.closest('tr');
      let row = table.row(tr);
      if (row.child.isShown()) {
        row.child.hide();
      }
      else {
        row.child(format_apt(row.data())).show();
      }
    });  </script>
</body>
{% endblock %}