{{template "header.tmpl" .}}

<link rel="stylesheet" href="/static/css/benchmark.css">

<div class="d-flex justify-content-between align-items-center">
    <h2>Benchmark #{{ .benchmark.ID }}</h2>
    <div>
        {{if eq .benchmark.UserID .userID }}
            <a class="btn btn-danger me-2" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="fa-solid fa-trash"></i> Delete</a>
        {{end}}
        <a class="btn btn-secondary" href="/benchmark/{{ .benchmark.ID }}/download" target="_blank" title="Reconstruct MangoHud-like CSV files"><i class="fa-solid fa-download"></i> Download</a>
    </div>
</div>

<div class="text-center">
    <h5><b>{{ .benchmark.Title }}</b></h5>
    <p>{{ .benchmark.Description }}</p>
    <p><small>Submitted <b>{{ .benchmark.CreatedAtHumanized }}</b> by <b><a href="/user/{{ .benchmark.User.ID }}">{{ .benchmark.User.Username }}</a></b></small></p>
</div>

<div class="row">
    <div class="col-12">
        <h5 class="text-center" style="font-size: 16px; font-weight: bold;">Specifications</h5>
        <div class="table-responsive">
            <table class="table table-sm table-bordered table-nowrap">
                <thead>
                    <tr>
                        <th scope="col">Label</th>
                        <th scope="col">OS</th>
                        <th scope="col">GPU</th>
                        <th scope="col">CPU</th>
                        <th scope="col">RAM</th>
                        <th scope="col">OS specific</th>
                    </tr>
                </thead>
                <tbody>
                    {{- range .benchmarkData }}
                    <tr>
                        <th scope="row">{{ .Label }}</th>
                        <td>{{ .SpecOS }}</td>
                        <td>{{ .SpecGPU }}</td>
                        <td>{{ .SpecCPU }}</td>
                        <td>{{ .SpecRAM }}</td>
                        <td>{{ .SpecLinuxKernel }} {{ .SpecLinuxScheduler }}</td>
                    </tr>
                    {{- end }}
                </tbody>
            </table>
        </div>
    </div>
</div>

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="fps-tab" data-bs-toggle="tab" data-bs-target="#fps" type="button" role="tab" aria-controls="fps" aria-selected="false"><i class="fas fa-tachometer-alt"></i> FPS</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="frametime-tab" data-bs-toggle="tab" data-bs-target="#frametime" type="button" role="tab" aria-controls="frametime" aria-selected="false"><i class="fas fa-clock"></i> Frametime</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="summary-tab" data-bs-toggle="tab" data-bs-target="#summary" type="button" role="tab" aria-controls="summary" aria-selected="true"><i class="fas fa-chart-bar"></i> Summary</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="more-metrics-tab" data-bs-toggle="tab" data-bs-target="#more-metrics" type="button" role="tab" aria-controls="more-metrics" aria-selected="true"><i class="fas fa-chart-line"></i> All data</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">

  <!-- FPS tab -->
  <div class="tab-pane fade show active" id="fps" role="tabpanel" aria-labelledby="fps-tab">
    <div id="fpsChart2" style="height:250pt;"></div>
    <div id="fpsMinMaxAvgChart" style="height:500pt;"></div>
    <div id="fpsDensityChart" style="height:250pt;"></div>
    <div id="fpsAvgChart" style="height:250pt;"></div>
    <div id="fpsStddevVarianceChart" style="height:400pt;"></div>
  </div>

  <!-- Frametime tab -->
  <div class="tab-pane fade" id="frametime" role="tabpanel" aria-labelledby="frametime-tab">
    <div id="frameTimeChart2" style="height:250pt;"></div>
    <div id="frametimeMinMaxAvgChart" style="height:500pt;"></div>
    <div id="frametimeDensityChart" style="height:250pt;"></div>
    <div id="frametimeAvgChart" style="height:250pt;"></div>
    <div id="frametimeStddevVarianceChart" style="height:400pt;"></div>
  </div>

  <!-- Summary tab -->
  <div class="tab-pane" id="summary" role="tabpanel" aria-labelledby="summary-tab">
        <div class="row">
            <div class="col-md-12" id="aiSummaryMarkdown">
{{ .benchmark.AiSummary }}
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div id="fpsSummaryChart" style="height:250pt;"></div>
            </div>
            <div class="col-md-6">
                <div id="frametimeSummaryChart" style="height:250pt;"></div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div id="cpuLoadSummaryChart" style="height:250pt;"></div>
            </div>
            <div class="col-md-6">
                <div id="gpuLoadSummaryChart" style="height:250pt;"></div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div id="gpuCoreClockSummaryChart" style="height:250pt;"></div>
            </div>
            <div class="col-md-6">
                <div id="gpuMemClockSummaryChart" style="height:250pt;"></div>
            </div>
        </div>
  </div>

  <!-- More metrics tab -->
  <div class="tab-pane" id="more-metrics" role="tabpanel" aria-labelledby="more-metrics-tab">
        <div id="fpsChart" style="height:250pt;"></div>
        <div id="frameTimeChart" style="height:250pt;"></div>
        <div id="cpuLoadChart" style="height:250pt;"></div>
        <div id="gpuLoadChart" style="height:250pt;"></div>
        <div id="cpuTempChart" style="height:250pt;"></div>
        <div id="gpuTempChart" style="height:250pt;"></div>
        <div id="gpuCoreClockChart" style="height:250pt;"></div>
        <div id="gpuMemClockChart" style="height:250pt;"></div>
        <div id="gpuVRAMUsedChart" style="height:250pt;"></div>
        <div id="gpuPowerChart" style="height:250pt;"></div>
        <div id="ramUsedChart" style="height:250pt;"></div>
        <div id="swapUsedChart" style="height:250pt;"></div>
  </div>

</div>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/full-screen.js"></script>
<script src="https://code.highcharts.com/modules/boost.js"></script>
<script src="https://unpkg.com/showdown/dist/showdown.min.js"></script>

<script>
    var fpsDataArrays = [
        {{- range .benchmarkData }}
        { label: '{{ .Label }}', data: {{ .DataFPS }} },
        {{- end }}
    ];

    var frameTimeDataArrays = [
        {{- range .benchmarkData }}
        { label: '{{ .Label }}', data: {{ .DataFrameTime }} },
        {{- end }}
    ];

    var cpuLoadDataArrays = [
        {{- range .benchmarkData }}
        { label: '{{ .Label }}', data: {{ .DataCPULoad }} },
        {{- end }}
    ];

    var gpuLoadDataArrays = [
        {{- range .benchmarkData }}
        { label: '{{ .Label }}', data: {{ .DataGPULoad }} },
        {{- end }}
    ];

    var cpuTempDataArrays = [
        {{- range .benchmarkData }}
        { label: '{{ .Label }}', data: {{ .DataCPUTemp }} },
        {{- end }}
    ];

    var gpuTempDataArrays = [
        {{- range .benchmarkData }}
        { label: '{{ .Label }}', data: {{ .DataGPUTemp }} },
        {{- end }}
    ];

    var gpuCoreClockDataArrays = [
        {{- range .benchmarkData }}
        { label: '{{ .Label }}', data: {{ .DataGPUCoreClock }} },
        {{- end }}
    ];

    var gpuMemClockDataArrays = [
        {{- range .benchmarkData }}
        { label: '{{ .Label }}', data: {{ .DataGPUMemClock }} },
        {{- end }}
    ];

    var gpuVRAMUsedDataArrays = [
        {{- range .benchmarkData }}
        { label: '{{ .Label }}', data: {{ .DataGPUVRAMUsed }} },
        {{- end }}
    ];

    var gpuPowerDataArrays = [
        {{- range .benchmarkData }}
        { label: '{{ .Label }}', data: {{ .DataGPUPower }} },
        {{- end }}
    ];

    var ramUsedDataArrays = [
        {{- range .benchmarkData }}
        { label: '{{ .Label }}', data: {{ .DataRAMUsed }} },
        {{- end }}
    ];

    var swapUsedDataArrays = [
        {{- range .benchmarkData }}
        { label: '{{ .Label }}', data: {{ .DataSwapUsed }} },
        {{- end }}
    ];

</script>

<script src="/static/js/benchmark.js"></script>

{{if eq .benchmark.UserID .userID }}
<div class="modal" id="exampleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Delete confirmation</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Are you sure you want to delete this benchmark?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No, cancel</button>
        <form hx-delete="/benchmark/{{ .benchmark.ID }}" >
            <button type="submit" class="btn btn-primary">Yes, delete</button>
        </form>
      </div>
    </div>
  </div>
</div>
{{end}}

{{template "footer.tmpl" .}}