<!DOCTYPE html>
<html lang="en">

<head>
    <title>7am weather for {{.LocationName}}</title>

    <meta name="title" content="7am weather for {{.LocationName}}">
    <meta name="description" content="Weather summary for {{.LocationName}}">

    <meta property="og:type" content="website">
    <meta property="og:url" content="https://7am.is/{{.Location}}">
    <meta property="og:title" content="7am Weather">
    <meta property="og:description" content="Weather summary for {{.LocationName}}">
    <meta property="og:image" content="https://7am.is/hero.png">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:url" content="https://7am.is/{{.Location}}">
    <meta name="twitter:title" content="7am Weather">
    <meta name="twitter:description" content="Weather summary for {{.LocationName}}">
    <meta name="twitter:image" content="https://7am.is/hero.png">

    <link rel="icon" type="image/png" href="/favicon.png">
    <link rel="manifest" href="/manifest.json">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Geist:wght@100..900&display=swap" rel="stylesheet">
    <link href="/style.css" rel="stylesheet">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    <div class="container">
        <main>
            <a class="back-link" href="/">&lt;- All locations</a>
            <p class="summary">{{.Summary}}</p>
            <button type="button" id="get-summary-btn" data-loc="{{.Location}}">Get daily summary at 7am</button>
            <a href="/instructions" class="instructions-link">Instructions for iPhone</a>
        </main>
    </div>
    <script src="/summary.js"></script>
</body>

</html>