<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>City University Portfolio</title>
    <link rel="stylesheet" href="{{ .Data.CSSBaseURL }}"/>
    {{ if .Light }}
    <link id="style-theme" rel="stylesheet" href="{{ .Data.CSSLightURL }}"/>
    {{ else }}
    <link id="style-theme" rel="stylesheet" href="{{ .Data.CSSDarkURL }}"/>
    {{ end }}
    <script type="application/javascript">
        const TheParameters = "{{ .Parameters }}"
        const CssLightURL = "{{ .Data.CSSLightURL }}"
        const CssDarkURL = "{{ .Data.CSSDarkURL }}"
        const SunImageURL = "{{ .Data.SunImageLocation }}"
        const MoonImageURL = "{{ .Data.MoonImageLocation }}"
        const PlayImageURL = "{{ .Data.PlayVideoImageLocation }}"
    </script>
    <script type="application/javascript" src="{{ .Data.JScriptURL }}"></script>
</head>
<body>
<header class="header">
    {{ if .Light }}
    <a href="?light" class="home-button no-dec" title="Home" id="logo"><div><img src="{{ .Data.LogoImageLocation }}" width="64px" alt="&#8962;"></div></a>
    <a href="?{{ .Parameters }}" class="home-button no-dec" title="Switch to Dark Mode" id="theme"><div><img src="{{ .Data.MoonImageLocation }}" width="64px" alt='{{ "{" }}'></div></a>
    {{ else }}
    <a href="?" class="home-button no-dec" title="Home" id="logo"><div><img src="{{ .Data.LogoImageLocation }}" width="64px" alt="&#8962;"></div></a>
    {{ if eq .Parameters "" }}
    <a href="?light" class="home-button no-dec" title="Switch to Light Mode" id="theme"><div><img src="{{ .Data.SunImageLocation }}" width="64px" alt='()'></div></a>
    {{ else }}
    <a href="?light&{{ .Parameters }}" class="home-button no-dec" title="Switch to Light Mode" id="theme"><div><img src="{{ .Data.SunImageLocation }}" width="64px" alt='()'></div></a>
    {{ end }}
    {{ end }}
    <input class="sort-menu" type="checkbox" id="sort-menu"/>
    <label class="sort-button no-dec" for="sort-menu" title="Order and Sort Options"><div><img src="{{ .Data.SortImageLocation }}" width="64px" alt='&#8595;'></div></label>
    <div class="so-pane" id="so-pane">
    <form action="?" method="get" id="so-form">
        {{ if .Light }}
        <input id="so-theme" type="hidden" name="light" />
        {{ end }}
        <div>
        {{ $sort := 0 }}
            <div><label class="no-dec" for="so-order">Order by:</label></div>
            <div><select name="order" id="so-order">
            {{ if eq .OrderStartDate 0 }}
            <option value="start">Start Date</option>
            {{ else }}
            <option value="start" selected>Start Date</option>
            {{ $sort = .OrderStartDate }}
            {{ end }}
            {{ if eq .OrderEndDate 0 }}
            <option value="end">End Date</option>
            {{ else }}
            <option value="end" selected>End Date</option>
            {{ $sort = .OrderEndDate }}
            {{ end }}
            {{ if eq .OrderName 0 }}
            <option value="name">Name</option>
            {{ else }}
            <option value="name" selected>Name</option>
            {{ $sort = .OrderName }}
            {{ end }}
            {{ if eq .OrderDuration 0 }}
            <option value="duration">Duration</option>
            {{ else }}
            <option value="duration" selected>Duration</option>
            {{ $sort = .OrderDuration }}
            {{ end }}
            </select></div>
        </div>
        <div>
            <div><label class="no-dec" for="so-sort">Sort:</label></div>
            <div><select name="sort" id="so-sort">
            {{ if gt $sort 0 }}
            <option value="asc" selected>Ascending</option>
            {{ else }}
            <option value="asc">Ascending</option>
            {{ end }}
            {{ if lt $sort 0 }}
            <option value="desc" selected>Descending</option>
            {{ else }}
            <option value="desc">Descending</option>
            {{ end }}
            </select></div>
        </div>
        <div class="so-pane-full">
        <span><input id="so-submit" type="submit" value="Commit"></span>
        </div>
    </form>
    </div>
    <input class="nav-menu" type="checkbox" id="nav-menu"/>
    <label class="hmb" for="nav-menu" title="Navigation Links"><span class="hmb-line"></span></label>
    <nav class="nav" id="nav">
        <ul class="menu no-lst-style">
            {{ range .Data.GetHeaderLabels }}
            <li><b><a href="{{ $.Data.GetHeaderLink . }}" class="no-dec" title="{{ . }}">{{ . }}</a></b></li>
            {{ end }}
        </ul>
    </nav>
</header>
<main class="main-box flex-col">
    <div id="about">
        <div class="item-table flex-col">
            <div class="item-heading">
                <div class="item-table-full">
                    <div class="centered"><h1>{{ .Data.About.Title }}</h1></div>
                </div>
                <div class="item-table-360">
                    <div class="centered"><h4>Email: <a href="mailto:{{ .Data.About.ContactEmail }}">{{ .Data.About.ContactEmail }}</a></h4></div>
                </div>
            </div>
            <div>
                <div class="item-table-full">
                    <div class="content">{{ .Data.About.GetContent }}</div>
                </div>
                <div class="item-table-360">
                    <div><a href="{{ .Data.About.ImageLocation }}"><img src="{{ .Data.About.ThumbnailLocation }}" alt="{{ .Data.About.ImageAltText }}" title="{{ .Data.About.ImageAltText }}" width="360px"></a></div>
                </div>
            </div>
        </div>
    </div>
    {{ $c := 0 }}
    {{ range .GetEntries }}
    {{ $c = $.CounterPlusPlus }}
    <div id="entry-{{ $c }}">
        <script type="application/javascript">
            EntryData[{{ $c }}] = CreateEntry("{{ .Name }}", "{{ .VideoLocation }}", "{{ .VideoContentType }}", "{{ .GetStartDateHTML }}", "{{ .GetEndDateHTML }}", "{{ .GetInt64Duration }}")
        </script>
        <div class="item-table flex-col">
            <div class="item-heading">
                <div class="item-table-full">
                    <div class="centered"><h1>{{ .Name }}</h1></div>
                </div>
                <div class="item-table-360">
                    {{ if eq .GetStartDate .GetEndDate }}
                    <div class="centered"><h4>{{ .GetStartDate }}</h4></div>
                    {{ else }}
                    <div class="centered"><h4>{{ .GetStartDate }} - {{ .GetEndDate }}</h4></div>
                    {{ end }}
                </div>
            </div>
            <div>
                <div class="item-table-full">
                    <div class="content">{{ .GetContent }}</div>
                </div>
                <div class="item-table-360">
                    <div id="video-{{ $c }}">
                    {{ if eq .VideoLocation "" }}
                        <img src="{{ $.Data.NoVideoImageLocation }}" alt="No Video" width="360px">
                    {{ else }}
                        <script type="application/javascript">
                            CreateVideoPlaceholder({{ $c }})
                        </script>
                        <noscript>
                            <video controls width="360px">
                                <source src="{{ .VideoLocation }}" type="{{ .VideoContentType }}">
                                <a href="{{ .VideoLocation }}">The Video</a>
                            </video>
                        </noscript>
                    {{ end }}
                    </div>
                </div>
            </div>
            {{ if not (eq .GetImageCount 0) }}
            <div class="item-table-caption">
                <div class="image-box flex-row">
                    {{ range .GetImages }}
                    <a href="{{ .ImageLocation }}"><img src="{{ .ThumbnailLocation }}" alt="{{ .ImageAltText }}" title="{{ .ImageAltText }}" width="240px"></a>
                    {{ end }}
                </div>
            </div>
            {{ end }}
        </div>
    </div>
    {{ end }}
</main>
<footer>
    <p>
        Looking for the old static HTML page, here's the <a href="index.html">link</a>.
    </p>
</footer>
</body>
</html>