<!DOCTYPE html>
<html>
    <head>
        <!-- Standard Meta -->
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

        <!-- Site Properties -->
        <title>Edmonton COVID-19 Statistics</title>
        <link rel="stylesheet" href="/public/css/semantic.min.css">
        <script src="/public/js/jquery-3.4.1.min.js"></script>
        <script src="/public/js/semantic.min.js"></script>
        <style type="text/css">
            h2 {
                margin: 2em 0em;
            }
            .ui.container {
                padding-top: 5em;
                padding-bottom: 5em;
            }
        </style>
        <script>
            $(document).ready(function () {
                $('#sourceCodeButton').on("click", function() {
                    window.location = "https://deadbeef.codes/steven/covid19-edmonton"
                });
            });
        </script>
    </head>
    <body>
        <div id="sourceCodeButton" class="ui right floated button">
            Source Code
        </div>
        <br />

        <center>
            <h1 class="ui header">
                COVID-19 Dashboard
                <div class="ui sub header">
                    Updated at {{ .UpdatedDate.Format "2006 Jan 02 15:04:05" }} Mountain Time (the real time)
                </div>
            </h1>
        </center>

        <div class="ui divider"></div>
        <div class="ui fluid four column doubling stackable grid container">
            <div class="column">
                <div class="ui raised padded segment">
                    <center>
                        <div class="ui statistic">
                            <div class="value">
                            {{ .Data.ActiveCasesEdmonton }}
                            </div>
                            <div class="label">
                                Active Edmonton Cases
                            </div>
                        </div>
                    </center>
                </div>
            </div>
            <div class="column">
                <div class="ui raised padded segment">
                    <center>
                        <div class="ui statistic">
                           <div class="value">
                                {{ .Data.TotalCasesEdmonton }}
                            </div>
                            <div class="label">
                                Total Edmonton Cases
                            </div>
                        </div>
                    </center>
                </div>
            </div>
            <div class="column">
                <div class="ui raised padded segment">
                    <center>
                        <div class="ui statistic">
                            <div class="value">
                            {{ .Data.ActiveCasesAlberta }}
                            </div>
                            <div class="label">
                                Active Alberta Cases
                            </div>
                        </div>
                    </center>
                </div>
            </div>
            <div class="column">
                <div class="ui raised padded segment">
                    <center>
                        <div class="ui statistic">
                            <div class="value">
                            {{ .Data.TotalCasesAlberta }}
                            </div>
                            <div class="label">
                                Total Alberta Cases
                            </div>
                        </div>
                    </center>
                </div>
            </div>
        </div>
    </body>
</html>