<!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>
    </head>
    <body>
        <div class="ui segment container">
            <center><h2 class="ui header">Updated at {{ .UpdatedDate.Format "2006 Jan 02 15:04:05" }} Mountain Time (the real time)</h2></center>
        </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>