<!DOCTYPE html>
<html>
    <head>
        <title><%= stash( 'title' ) || 'Yancy' %></title>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        %= stylesheet "/yancy/bootstrap.css"
        %= stylesheet "/yancy/font-awesome/css/font-awesome.css"
        %= javascript "/yancy/jquery.js"
        %= javascript "/yancy/popper.js"
        %= javascript "/yancy/bootstrap.js"
        %= stylesheet begin
            html, body { height: 100%; }
            .non-footer {
                min-height: calc( 100% - 2em );
            }
            .non-footer + footer {
                height: 2em;
            }
            footer small {
                display: inline-block;
                padding: 0.5em 0.5em 0 0.5em;
                background: #f8f8f8;
                box-shadow: inset -1px rgba(0, 0, 0, .1);
                border-radius: 4px;
            }
        % end
        %= content_for 'head'
    </head>
    <body>

        <div class="non-footer">
            <nav class="navbar navbar-expand navbar-dark bg-dark sticky-top d-none d-sm-flex">
              <a class="navbar-brand" href="<%= url_for 'yancy.index' %>"><%= stash( 'title' ) || 'Yancy' %></a>
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link text-light" href="<%= url_for stash 'return_to' %>"><i class="fa fa-sign-out"></i> <%= stash( 'return_label' ) || l 'Back to Application' %></a>
                  </li>
                </ul>
              </div>
            </nav>

            %= content
        </div>

        <footer class="d-flex flex-row-reverse align-items-end">
            <small>Yancy v<%= Mojolicious::Plugin::Yancy->VERSION %> (<a href="http://github.com/preaction/Yancy">Github</a>)</small>
        </footer>

    </body>
</html>