{% if dataset_stats_table %}
<div>
  <div class="tab-structure-info-button">
    <input type="checkbox" id="datasetstatistics">
    <label class="tab-label-structure-info-button" for="datasetstatistics"><h3>Dataset statistics <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
        <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
      </svg></h3></label>
    <div class="tab-content">
        <p>The following table shows the key figures of the base and the alternative dataset.</p>
        <p>The allocated privacy budget for each dataset are shown below and noise is applied accordingly to compute the estimate and the 95% confidence interval.</p>
        <p>The symmetric mean absolute percentage error between base and alternative estimates is computed and indicated in the last column.</p>
    </div>
  </div>
    <table class="default">               
        <tr>
          <th style="width:30%">Base:</th>
          <td style="width:30%">privacy budget: {{dataset_stats_eps[0]}}</td>
        </tr>
        <tr>
          <th style="width:30%">Alternative:</th>
          <td style="width:30%">privacy budget: {{dataset_stats_eps[1]}}</td>
        </tr>
      </table>
    {{dataset_stats_table}}
</div>
{% endif %}

{% if missing_values_table %}
<div>
  <div class="tab-structure-info-button">
    <input type="checkbox" id="missingvalues">
    <label class="tab-label-structure-info-button" for="missingvalues"><h3>Missing values <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
        <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
      </svg></h3></label>
    <div class="tab-content">
        <p>The following table shows the number of missing values for each column of the two datasets.</p>
        <p>The allocated privacy budget for each dataset are shown below and noise is applied accordingly to compute the estimate and the 95% confidence interval.</p>
        <p>The symmetric mean absolute percentage error between base and alternative estimates is computed and indicated in the last column.</p>

    </div>
  </div>
  <table class="default">               
      <tr>
        <th style="width:30%">Base:</th>
        <td style="width:30%">privacy budget: {{missing_values_eps[0]}}</td>
      </tr>
      <tr>
        <th style="width:30%">Alternative:</th>
        <td style="width:30%">privacy budget: {{missing_values_eps[1]}}</td>
      </tr>
    </table>
    {{missing_values_table}}
</div>
{% endif %}

{% if trips_over_time_linechart or trips_per_weekday_barchart or trips_per_hour_linechart %}
<div>
    {% if trips_over_time_linechart %}
    <div>
      <div class="tab-structure-info-button">
          <input type="checkbox" id="tripsovertime">
          <label class="tab-label-structure-info-button" for="tripsovertime"><h3>Trips over time <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
              <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/> <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/> </svg></h3></label>
          <div class="tab-content">
              <p>This visualization shows the relative number of trips on a timeline of the base and alternative dataset.</p>
              <p>The allocated privacy budget for each dataset are shown below and noise is applied accordingly to compute the estimate (blue and orange line) and the 95% confidence interval. The confidence interval is visualized as shaded error bands, colored respectively for base and alternative.</p>
              <p>The y-axis shows the percentage of trips while the x-axis will show the timeline aggregated as indicated below the visualization. The legend indicates the color for the base dataset and the alternative dataset. </p>
          </div>
      </div>
        <table class="default">               
            <tr>
              <th style="width:30%">Base:</th>
              <td style="width:30%">privacy budget: {{trips_over_time_eps[0]}}</td>
              <td style="width:30%">95% CI: +/- {{trips_over_time_moe[0]}} %</td>
            </tr>
            <tr>
              <th style="width:30%">Alternative:</th>
              <td style="width:30%">privacy budget: {{trips_over_time_eps[1]}}</td>
              <td style="width:30%">95% CI: +/- {{trips_over_time_moe[1]}} %</td>
            </tr>
          </table>

        <div>
            {{trips_over_time_linechart}}
            <p class ="info">
                {{trips_over_time_info}}
            </p>
            {{trips_over_time_measure}}
        </div>
    </div>
    <div>
        {{trips_over_time_summary_table}}
    </div>
    {% endif %}

    {% if trips_per_weekday_barchart %}
    <div>
      <div class="tab-structure-info-button">
        <input type="checkbox" id="tripsperweekday">
        <label class="tab-label-structure-info-button" for="tripsperweekday"><h3>Trips per weekday <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/> <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/> </svg></h3></label>
        <div class="tab-content">
            <p>This histogram visualizes the relative number of trips per weekday for the base and alternative dataset.</p>
            <p>The allocated privacy budgets for both datasets are shown below and noise is applied accordingly to compute the estimate (bars) and the 95% confidence interval (error bar).</p>
            <p>The y-axis shows the percentage of trips while the x-axis shows the weekdays. The legend indicates the color for the base dataset and the alternative dataset.</p>
          </div>
    </div> 
        <table class="default">               
            <tr>
              <th style="width:30%">Base:</th>
              <td style="width:30%">privacy budget: {{trips_per_weekday_eps[0]}}</td>
              <td style="width:30%">95% CI: +/- {{trips_per_weekday_moe[0]}} %</td>
            </tr>
            <tr>
              <th style="width:30%">Alternative:</th>
              <td style="width:30%">privacy budget: {{trips_per_weekday_eps[1]}}</td>
              <td style="width:30%">95% CI: +/- {{trips_per_weekday_moe[1]}} %</td>
            </tr>
          </table>    
        <div>
            {{trips_per_weekday_barchart}}
            {{trips_per_weekday_measure}}
        </div>
    </div>
    {% endif %} 

    {% if trips_per_hour_linechart %}
    <div>
      <div class="tab-structure-info-button">
        <input type="checkbox" id="tripsperhour">
        <label class="tab-label-structure-info-button" for="tripsperhour"><h3>Trips per hour of day <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
            <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/> <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/> </svg></h3></label>
        <div class="tab-content">
          <p>This linechart shows the relative number of trips per hour over the course of a day, disaggregated by weekday and weekend for the base and alternative dataset.</p>
          <p>The allocated privacy budget for both datasets are shown below and noise is applied accordingly to compute the estimate (lines). The confidence interval is indicated below but not visualized in the graph due to visual clarity. </p>
          <p>The legend shows the colors for each time category (weekday start, weekday end, weekend start, weekend end) indicating the start and end timestamp of each trip and if the trip was during the week or on the weekend. Furthermore, the lines are either continuous or dashed for the base and the alternative dataset.</p>
          <p>The y-axis shows the percentage of trips while the x-axis shows the hour of the day.</p>
          </div>
    </div> 
        <table class="default">               
            <tr>
              <th style="width:30%">Base:</th>
              <td style="width:30%">privacy budget: {{trips_per_hour_eps[0]}}</td>
              <td style="width:30%">95% CI: +/- {{trips_per_hour_moe[0]}} %</td>
            </tr>
            <tr>
              <th style="width:30%">Alternative:</th>
              <td style="width:30%">privacy budget: {{trips_per_hour_eps[1]}}</td>
              <td style="width:30%">95% CI: +/- {{trips_per_hour_moe[1]}} %</td>
            </tr>
          </table> 
        <div>
            {{trips_per_hour_linechart}}
            {{trips_per_hour_measure}}
        </div>
    </div>
    {% endif %}
</div>
{% endif %}
   