<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <script src="https://unpkg.com/vue@2"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" />
        <style>
            .full-height-flex {
                display: flex;
                flex-direction: column;
                height: 100vh;
            }
            .header-flex {
                display: flex;
                flex-direction: column;
            }
            .body-flex {
                display: flex;
                flex-direction: column;
                overflow-y: auto;
            }
        </style>
    </head>

    <body>
        <div id="app" class="container-fluid">
            <div class="row">
                <div class="col-4 full-height-flex">
                    <div class="header-flex">
                        <h3 class="mt-2 mb-4">CSDR remotes stats</h3>

                        <div class="d-flex">
                            <button class="btn me-3" :class="{ 'btn-warning': allRemotesStats }" @click="changeStatsType(true)">
                                All remotes stats
                            </button>

                            <button class="btn me-3" :class="{ 'btn-warning': !allRemotesStats }" @click="changeStatsType(false)">
                                Single remote stats
                            </button>
                        </div>
                    </div>

                    <div class="body-flex" v-if="!allRemotesStats">
                        <h5 class="mt-3 mb-3">Select a remote:</h5>
                        <table class="table table-striped" v-show="remotes.length !== 0">
                            <thead>
                                <tr>
                                    <th scope="col">&nbsp;</th>
                                    <th scope="col">Remote</th>
                                    <th scope="col">Participant ?</th>
                                    <th scope="col">Full skel.?</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="remote in remotes">
                                    <td>
                                        <div class="form-radio" :key="remote.name">
                                            <input
                                                class="form-radio-input"
                                                type="radio"
                                                :value="remote.name"
                                                :id="remote.name"
                                                v-model="selectedRemotes"
                                                @change="remoteSelected($event)" />
                                        </div>
                                    </td>
                                    <td>{{ remote.name }}</td>
                                    <td>
                                        <div :class="{ 'text-primary fw-bold': remote.participant }">{{ remote.participant }}</div>
                                    </td>
                                    <td>
                                        <div :class="{ 'text-success fw-bold': remote.fullSkeletonSources }">
                                            {{ remote.fullSkeletonSources }}
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="col-8">
                    <div v-if="!allRemotesStats">
                        <h5 class="mt-5 mb-3">Selected remote : {{ selectedRemotes }}</h5>
                        <div class="d-none">{{ remoteStats.versions }}</div>
                        <div style="height: 250px">
                            <canvas id="versions"></canvas>
                        </div>
                    </div>

                    <div v-if="allRemotesStats">
                        <div v-if="!remoteAllStats.length">
                            <h5 class="mt-5 mb-3">please wait... loading stats</h5>
                            <div class="spinner-border"></div>
                        </div>

                        <div v-if="remoteAllStats.length">
                            <h5 class="mt-5 mb-3">
                                Remotes stats per env -
                                <span class="text-primary">{{ remoteAllStats.length }} remotes</span>
                            </h5>

                            <table class="table table-default table-sm">
                                <thead>
                                    <th>Remotes</th>
                                    <th style="width: 5rem">Total</th>
                                    <th style="width: 5rem">DEV</th>
                                    <th style="width: 5rem">TST</th>
                                    <th style="width: 5rem">INT</th>
                                    <th style="width: 5rem">ACC</th>
                                    <th style="width: 5rem">TRN</th>
                                    <th style="width: 5rem">PROD</th>
                                    <th>Last build info</th>
                                </thead>
                                <tr v-for="remote in remoteAllStats">
                                    <td>{{ remote.name }}</td>
                                    <td :class="{ 'table-danger': remote.summary.versionsCount === 0 }">
                                        {{ remote.summary.versionsCount }}
                                    </td>
                                    <td :class="{ 'table-success': remote.summary.versionsCountEnvs.DEV !== 0 }">
                                        {{ remote.summary.versionsCountEnvs.DEV }}
                                    </td>
                                    <td :class="{ 'table-success': remote.summary.versionsCountEnvs.TST !== 0 }">
                                        {{ remote.summary.versionsCountEnvs.TST }}
                                    </td>
                                    <td :class="{ 'table-success': remote.summary.versionsCountEnvs.INT !== 0 }">
                                        {{ remote.summary.versionsCountEnvs.INT }}
                                    </td>
                                    <td :class="{ 'table-success': remote.summary.versionsCountEnvs.ACC !== 0 }">
                                        {{ remote.summary.versionsCountEnvs.ACC }}
                                    </td>
                                    <td :class="{ 'table-success': remote.summary.versionsCountEnvs.TRN !== 0 }">
                                        {{ remote.summary.versionsCountEnvs.TRN }}
                                    </td>
                                    <td :class="{ 'table-success': remote.summary.versionsCountEnvs.PROD !== 0 }">
                                        {{ remote.summary.versionsCountEnvs.PROD }}
                                    </td>
                                    <td>
                                        <strong>{{ remote.lastVersion.envTarget }}</strong>
                                        - {{ remote.lastVersion.version }} - {{ remote.lastVersion.date }}
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>

    <script src="stats.js"></script>
</html>
