{{define "title"}}Blog{{end}}
{{define "description"}}"thehinterlander's repository of musings"{{end}}

{{define "main"}}
    <div class="flex_between">
        <div class="topline">
            <h2>Blog</h2>
            <p>Home of {{.Name}}</p>
        </div>
        <div class="spacer"></div>
        {{if .IsAuth}}
            <a href="/logout" class="nav_tag right">Logout</a>
        {{else}}
            <a href="/login" class="nav_tag right">Login</a>
        {{end}}
    </div>
    <div class="mobile_flexb flex_end right_nofloat">
        <form action="/search" method="GET" class="mobile_fullw">
            <input type="search" id="search_bar" name="query" placeholder="Search posts..." aria-label="Search for posts">
            <button type="submit" id="search-button">Search</button>
        </form>
    </div>
    {{if .IsAuth}}
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.css">
        <script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
        <script type="module" src="/static/get?file=mde.js"></script>
        <div class="card">
            <div class="header">
                <h4><b>New</b></h4>
                <form id="md_form" class="markdown_form">
                    <div class="white text_left">
                        <label for="raw"></label>
                        <input type="textarea" id="raw" name="raw" style="white-space: pre-wrap;">
                    </div>
                    <br>
                    <input type="submit" value="Post">
                </form>
            </div>
        </div>
    {{end}}
    {{range .Rows}}
        <div class="card">
            <div class="header">
                <h4><b>{{.Name}} - {{.FormattedTime}}</b></h4>
            </div>
            {{.Brief}}
            <a href="/post?id={{.Id}}" class="nav_tag">View More</a>
        </div>
    {{end}}
    <div class="flex_end bottom_elem">
        <a href="/feed.rss" class="rss">
            <img src="/static/get?file=images/feed.svg" alt="RSS">
        </a>
        <div class="right">
            {{if ne .Offset 0}}
                {{if eq .SearchTerm ""}}
                    <a href="/?offset={{sub .Offset 10}}" class="nav_tag">Previous</a>
                {{else}}
                    <a href="/search?offset={{sub .Offset 10}}&query={{.SearchTerm}}" class="nav_tag">Previous</a>
                {{end}}
            {{end}}
            {{if .PagePopulated}}
                {{if eq .SearchTerm ""}}
                    <a href="/?offset={{add .Offset 10}}">Next</a>
                {{else}}
                    <a href="/search?offset={{add .Offset 10}}&query={{.SearchTerm}}">Next</a>
                {{end}}
            {{end}}
        </div>
    </div>
{{end}}