<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>URL Shortener</title>
    <link rel="stylesheet" href="/static/pico.2.0.6.min.css">
    <link rel="stylesheet" href="/static/main.css?v=0.0.2">
    <script type="application/javascript" src="/static/main.js"></script>
</head>
<body class="container">
    <h1 class="headline">URL Shortener</h1>
    <form action="/" method="post">
        <label for="address">Address:</label>
        <input type="text" id="address" name="address" required>
        <label for="custom">Short Name (optional):</label>
        <input type="text" id="custom" name="custom">
        <button type="submit">Shorten URL</button>
    </form>
    <hr>
    <div class="grid">
        <div class="grid-cell">Active</div>
        <div class="grid-cell">Short Name</div>
        <div class="grid-cell">Address</div>
        {{- range .NamedAddresses }}
            <div class="grid-cell active">
                <input type="checkbox" role="switch" {{ if .Active }}checked{{ end }} onclick="toggle('{{ .Name }}', {{ not .Active }});">
            </div>
            <div class="grid-cell">
                {{ if .Active }}
                    <a href="{{ .Name }}" target="_blank">{{ .Name }}</a>
                {{ else }}
                    {{ .Name }}
                {{ end }}
            </div>
            <div class="grid-cell">{{ .Address }}</div>
        {{- end }}
    </div>
</body>
</html>
