{{define "main"}}
<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Mail Admin.">

    <title>mailadm</title>

    <script src="/htmx.org@1.9.2.js" integrity="sha384-L6OqL9pRWyyFU3+/bjdSri+iIphTN/bvYyM37tICVyOJkWZLpP2vGn6VUEXgzg6h" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="/pure-min@3.0.0.css" integrity="sha384-X38yfunGUhNzHpBaEBsWLO+A0HDYOQi8ufWDkZ0k9e0eXz/tH3II7uKZ9msv++Ls" crossorigin="anonymous">
    <link rel="stylesheet" href="/layout.css" crossorigin="anonymous">

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
    <link rel="manifest" href="/site.webmanifest">
</head>

<body id="layout" class="content pure-g">

<nav id="nav" class="pure-u">
    <input id="menu-toggle" type="checkbox" />
    <label class='menu-button-container' for="menu-toggle">
    <div class='menu-button'></div>

    <div class="nav-inner">
        <button class="primary-button pure-button">Compose</button>

        <div class="pure-menu">
            <ul class="pure-menu-list">
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Inbox <span class="email-count">(2)</span></a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Important</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Sent</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Drafts</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Trash</a></li>
                <li class="pure-menu-heading">Labels</li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link"><span class="email-label-personal"></span>Personal</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link"><span class="email-label-work"></span>Work</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link"><span class="email-label-travel"></span>Travel</a></li>
            </ul>
        </div>
    </div>
</nav>

<div id="list" class="pure-u-1">
    <div class="email-item email-item-selected pure-g">
        <div class="pure-u">
            <img width="64" height="64" alt="Tilo Mitra&#x27;s avatar" class="email-avatar" src="/img/common/tilo-avatar.png">
        </div>

        <div class="pure-u-3-4">
            <h5 class="email-name">Tilo Mitra</h5>
            <h4 class="email-subject">Hello from Toronto</h4>
            <p class="email-desc">
                Hey, I just wanted to check in with you from Toronto. I got here earlier today.
            </p>
        </div>
    </div>

    <div class="email-item email-item-unread pure-g">
        <div class="pure-u">
            <img width="64" height="64" alt="Eric Ferraiuolo&#x27;s avatar" class="email-avatar" src="/img/common/ericf-avatar.png">
        </div>

        <div class="pure-u-3-4">
            <h5 class="email-name">Eric Ferraiuolo</h5>
            <h4 class="email-subject">Re: Pull Requests</h4>
            <p class="email-desc">
                Hey, I had some feedback for pull request #51. We should center the menu so it looks better on mobile.
            </p>
        </div>
    </div>

    <div class="email-item pure-g">
        <div class="pure-u">
            <img width="64" height="64" alt="Reid Burke&#x27;s avatar" class="email-avatar" src="/img/common/reid-avatar.png">
        </div>

        <div class="pure-u-3-4">
            <h5 class="email-name">Reid Burke</h5>
            <h4 class="email-subject">Re: Design Language</h4>
            <p class="email-desc">
                Excepteur sint occaecat cupidatat non proident, sunt in culpa.
            </p>
        </div>
    </div>

    <div class="email-item pure-g">
        <div class="pure-u">
            <img width="64" height="64" alt="Yahoo! Finance&#x27;s Avatar" class="email-avatar" src="/img/common/yfinance-avatar.png">
        </div>

        <div class="pure-u-3-4">
            <h5 class="email-name">Yahoo! Finance</h5>
            <h4 class="email-subject">How to protect your finances from winter storms</h4>
            <p class="email-desc">
                Mauris tempor mi vitae sem aliquet pharetra. Fusce in dui purus, nec malesuada mauris.
            </p>
        </div>
    </div>

    <div class="email-item pure-g">
        <div class="pure-u">
            <img width="64" height="64" alt="Yahoo! News&#x27; avatar" class="email-avatar" src="/img/common/ynews-avatar.png">
        </div>

        <div class="pure-u-3-4">
            <h5 class="email-name">Yahoo! News</h5>
            <h4 class="email-subject">Summary for April 3rd, 2021</h4>
            <p class="email-desc">
                We found 10 news articles that you may like.
            </p>
        </div>
    </div>
</div>


<secton id="main" class="pure-u-1">
{{template "content" .}}
</section>

</body>
</html>
{{end}}
