{{ $auth := (get_auth .C) }}
<h1 class="page-header">Dashboard</h1>
<hr>
<main>
    <div class="container">
        <div class="row p-2">
            <div class="col">
                <div class="card border">
                    <div class="card-header">Welcome</div>
                    <div class="card-body text-center">
                        <blockquote class="blockquote">
                            <p>
                                夜明け前が一番暗い
                            </p>
                            <p>
                                The night is darkest just before the dawn.
                            </p>

                        </blockquote>
                        <hr>
                        <div id="welcome">
                            <p>
                                Welcome to yoake.yumechi.jp, Yumechi's <a target="_blank"
                                    href="https://en.wikipedia.org/wiki/Personal_information_manager">
                                    <abbr title="Personal Information Manager" class="initialism">PIM</abbr></a>.
                            </p>
                            <p>
                                Built with
                                <abbr title="Echo HTTP Framework"><a target="_blank" rel="nofollow noreferer"
                                        href="https://echo.labstack.com/">Echo</a></abbr>,
                                <abbr title="Bootstrap CSS Framework"><a target="_blank" rel="nofollow noreferer"
                                        href="https://getbootstrap.com/">Bootstrap</a></abbr>,
                                <abbr title="jQuery JavaScript Library"><a href="https://jquery.com/" target="_blank"
                                        rel="nofollow noreferer">jQuery</a></abbr>,
                                and
                                <abbr title="Golang Standard Library html/template"><a target="_blank"
                                        rel="nofollow noreferer"
                                        href="https://pkg.go.dev/html/template">html/template</a></abbr>.
                                Intended to be a parody of the
                                <abbr title="Terumo BCT Trima Accel(R)"><a href="https://www.terumobct.com/trima"
                                        target="_blank" rel="nofollow noreferer">Trima Accel (R)</a></abbr> UI.
                            </p>
                            <p>
                                {{ if not $auth.Valid }}
                                This website welcomes guests as well!
                                Click around and I hope you cound have some fun!
                                {{ else }}
                                {{ if eq (index $auth.Roles 0) "admin" }}
                                Welcome Home!
                                {{ else }}
                                Hello, my friend! You know the drill!
                                {{ end }}
                                {{ end }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row p-2">
            <div class="col">
                <div class="card border">
                    <div class="card-header">Time</div>
                    <div class="card-body text-center">
                        <div id="clock" class="h5"></div>
                        <script>
                            (function () {
                                "use struct";
                                const dateInZone = (zone) => {
                                    if (zone)
                                        return new Date(new Date().toLocaleString("en-US", { timeZone: zone }));
                                    return new Date()
                                }
                                const timeInZone = (zone) => {
                                    const date = dateInZone(zone);
                                    var h = date.getHours(); // 0 - 23
                                    var m = date.getMinutes(); // 0 - 59
                                    var s = date.getSeconds(); // 0 - 59

                                    h = (h < 10) ? "0" + h : h;
                                    m = (m < 10) ? "0" + m : m;
                                    s = (s < 10) ? "0" + s : s;
                                    return `
                                    <p class="${zone ? "fs-3" : "h2"}">
                                        ${zone ? '<small class="fw-lighter">' + zone + '</small><br>' : ""}
                                            <span class="fw-bolder" > ${h}:${m}:${s} <span>
                                            </p>${zone ? "" : "<hr>"}
                                    `
                                }
                                const zones = ["", "America/Los_Angeles", "America/New_York",
                                    "Asia/Tokyo", "Asia/Shanghai", "UTC"]
                                let update = () => {
                                    var date = new Date();

                                    var time = ""
                                    zones.forEach((zone) => {
                                        time += timeInZone(zone) + "\n";
                                    });
                                    document.getElementById("clock").innerHTML = time;
                                }
                                update();
                                setInterval(update, 1000);
                            })()

                        </script>
                        <style>
                        </style>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card border">
                    <div class="card-header">Operator Info </div>
                    <div class="card-body text-center">

                        {{ if $auth.Valid }}
                        {{ if eq (index $auth.Roles 0) "admin" }}
                        <img class="d-block mx-auto trima-btn-card" src={{ trima_img "ja/btn_vista_operator.gif" "url"
                            }}>
                        <p>
                            You have super powers!
                        </p>
                        {{ end }}
                        <p>Your session expires at {{ $auth.Expire }}</p>
                        <button class="btn btn-primary" onclick="signout()">Sign Out</button>
                        {{ else }}
                        <a onclick="signin()" href="#" aria-hidden="true">
                            <img class=" mx-auto trima-btn-card" src={{ trima_img "icon_squeeze.gif" "url" }}>
                        </a>
                        <p>
                            You do not have any priviledges. Keep squeezing!
                        </p>
                        <button class="btn btn-primary" onclick="signin()">Sign In</button>
                        {{ end }}
                        <table class="table text-center">
                            <thead>
                                <tr>
                                    <th>Tab Status Icon</th>
                                    <th>Meaning</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <img src={{ trima_img "icon_t_vista_procedure_optimal.gif" "url" }} />
                                    </td>
                                    <td class="align-middle">
                                        Tab Selected (Active)
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <img src={{ trima_img "icon_t_vista_procedure_valid.gif" "url" }} />
                                    </td>
                                    <td class="align-middle">
                                        Tab Available
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <img src={{ trima_img "icon_t_vista_procedure_ineligible.gif" "url" }} />
                                    </td>
                                    <td class="align-middle">
                                        Addn. Authorization Required
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <img src={{ trima_img "icon_t_vista_procedure_questionable.gif" "url" }} />
                                    </td>
                                    <td class="align-middle">
                                        Unknown
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <img src={{ trima_img "icon_t_vista_procedure_invalid.gif" "url" }} />
                                    </td>
                                    <td class="align-middle">
                                        Access Denied
                                    </td>
                                </tr>
                            </tbody>
                        </table>



                    </div>
                </div>
            </div>
        </div>
</main>