{{ define "title" }}{{ end }}
{{ define "scripts" }}{{ end }}

{{ define "layout" }}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>{{ template "title" . }} - {{ .Title }}</title>

    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/bluez/theme.css">

    <link rel="stylesheet" href="/css/blog-core.css">
    <!-- <link rel="stylesheet" href="/css/gfm.css"> -->
</head>
<body>

<nav class="navbar navbar-expand-md fixed-top bluez-navbar">
    <a href="#" class="navbar-brand">{{ .Title }}</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a href="/" class="nav-link">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a href="/about" class="nav-link">About</a>
            </li>
            <li class="nav-item">
                <a href="/archive" class="nav-link">Archive</a>
            </li>
            <li class="nav-item">
                <a href="/contact" class="nav-link">Contact Me</a>
            </li>
        </ul>

        <form class="form-inline mt-2 mt-md-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

<div class="bluez-header">
    <div class="container">
        <h1 class="bluez-title">{{ .Title }}</h1>
        <p class="lead bluez-description">Just another web blog.</p>
    </div>
</div>

<div class="container mb-5">
    <div class="row">
        <div class="col-9">
            {{ if .SetupNeeded }}
            <div class="alert alert-success">
                Your web blog needs to be set up!
                Please <a href="/initial-setup">click here</a> to
                configure your blog.
            </div>
            {{ end }}

            {{ range .Flashes }}
            <div class="alert alert-success">
                {{ . }}
            </div>
            {{ end }}

            {{ if .Error }}
            <div class="alert alert-danger">
                <strong>Error:</strong> {{ .Error }}
            </div>
            {{ end }}

            {{ template "content" . }}

            {{ if and .CurrentUser.Admin .Editable }}
                <p class="mt-4">
                    <strong>Admin:</strong> [<a href="/admin/editor?file={{ or .Data.MarkdownFile TemplateName }}">edit this page</a>]
                </p>
            {{ end }}
        </div>
        <div class="col-3">

            <div class="card mb-4">
                <div class="card-body">
                    <h4 class="card-title">About</h4>

                    <p>Hello, world!</p>
                </div>
            </div>

            {{ if .LoggedIn }}
            <div class="card mb-4">
                <div class="card-body">
                    <h4 class="cart-title">Control Center</h4>

                    <p>
                        Logged in as: <a href="/account">{{ .CurrentUser.Username }}</a>
                    </p>

                    <ul class="list-unstyled">
                        {{ if .CurrentUser.Admin }}
                        <li class="list-item"><a href="/admin">Admin Center</a></li>
                        {{ end }}
                        <li class="list-item"><a href="/logout">Log out</a></li>
                    </ul>

                    <h5>Manage Blog</h5>

                    <ul class="list-unstyled">
                        <li class="list-item"><a href="/blog/edit">Post Blog Entry</a></li>
                        <li class="list-item"><a href="/blog/drafts">View Drafts</a></li>
                        <li class="list-item"><a href="/blog/private">View Private</a></li>
                    </ul>
                </div>
            </div>
            {{ end }}

            <div class="card mb-4">
                <div class="card-body">
                    <h4 class="card-title">Archives</h4>

                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="#">March 2018</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">February 2018</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">January 2018</a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="card">
                <div class="card-body">
                    <h4 class="card-title">Elsewhere</h4>

                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="#">Facebook</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Twitter</a>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
</div>

<footer class="bluez-footer">
    <div class="container">
        <div class="row">
            <div class="col-8">
                <ul class="nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#">RSS</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Random</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Archive</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Ask me anything</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Back to top</a>
                    </li>
                    {{ if .LoggedIn }}
                    <li class="nav-item">
                        <a class="nav-link" href="/logout">Log out</a>
                    </li>
                    {{ else }}
                    <li class="nav-item">
                        <a class="nav-link" href="/login">Log in</a>
                    </li>
                    {{ end }}
                </ul>
            </div>
            <div class="col-4">
                Copyright 2017
            </div>
        </div>
    </div>
</footer>

{{ template "scripts" or "" }}

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