<!DOCTYPE html>
<html lang="hr">
<head>
    <title>Holiday-api | Praznici za {{deferint $.Search.Year}}</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <meta name="description" content="Lista praznika za godinu {{deferint $.Search.Year}}. Praznici ovo ili neku drugu godinu pronađi ovdje. "/>

    <link rel="icon" href="/assets/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="/assets/global.css">
    <script src="/assets/global.js"></script>

    <style>
        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: var(--dropdown-background);
            min-width: 160px;
            box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
            z-index: 1;
        }

        .dropdown-content.selected {
            display: block;
        }
        .dropdown-content a {
            all: unset;
            display: block;
            padding: 0.5em 1em;
        }
        .dropdown-content a:hover {
            background: rgba(95, 158, 160, 0.2);
        }
    </style>
</head>
<body>
<div class="background-image" style="position: fixed;"></div>
<header>
    <h1><a href="/">Holiday-api</a> | {{deferint $.Search.Year}}</h1>
    <div style="flex-grow: 1"></div>
    <a style="all: unset;" href="/documentation">Api dokumentacija</a>
</header>
<main class="dialog results-dialog">
    <section style="margin-bottom: 1em;">
        <form style="display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1em" action="/">
            <div style="flex-grow: 1;"></div>
            <div class="form-field" style="width: auto;" >
                <label for="year">Za godinu:</label>
                <select id="year" name="year" style="width: 150px">
                    {{range $entry := .Years}}
                        <option {{if intpeq $.Search.Year $entry}}selected{{end}} value="{{$entry}}">{{$entry}}</option>
                    {{end}}
                </select>
            </div>
            <div class="button-actions">
                <button class="primary">Pretraži</button>
            </div>
            <div class="button-actions" style="margin-left: auto">
                <div class="dropdown">
                    <button type="button" class="secondary dropdown-action">Preuzmi</button>
                    <div class="dropdown-content">
                        <a target="_blank" href="/api/v1/holidays?country=HR&type=csv&year={{deferint $.Search.Year}}">Kao csv</a>
                        <a target="_blank" href="/api/v1/holidays?country=HR&type=json&year={{deferint $.Search.Year}}">Kao json</a>
                        <a target="_blank" href="/api/v1/holidays?country=HR&type=xml&year={{deferint $.Search.Year}}">Kao xml</a>
                    </div>
                </div>
            </div>
        </form>
    </section>
    <table class="results">
        <thead>
        <tr>
            <th>Ime</th>
            <th>Datum</th>
        </tr>
        </thead>
        <tbody>
        {{range $entry := .Holidays}}
            <tr>
                <td>{{$entry.Name}}</td>
                <td>{{$entry.Date.Format "02.01.2006."}}</td>
            </tr>
        {{end}}
        </tbody>
    </table>
</main>
</body>
</html>