<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
    <meta charset="utf-8" />
    {% if mastodon.host %}
    <link rel="me" href="https://{{mastodon.host}}/@{{mastodon.acct}}"/>
    {% endif %}
    <title>{{title}}{% block subtitle %}{% endblock %}</title>
    {% block meta %}
    <meta name="description" content="{{description}}" />
    <meta name="keywords" content="{% for tag in tags %} {{tag.name}}, {% endfor %}" />
    {% endblock %}
    <link rel="canonical" href="{{site-url}}{{uri}}" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/png" href="{{blog-prefix}}/img/favicon.png" />
    <link href="//fonts.googleapis.com/css?family=Alegreya:400italic,700italic,400,700" rel="stylesheet"
        type="text/css" />
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" />
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.7.0/styles/default.min.css" />
    {% style "css/screen.css" %}
</head>

<body>
    <nav class="navbar navbar-default">
        <div class="container">
            <div id="nav" class="navbar-header">
                <button type="button" id="navbar-button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="{{index-uri}}">{{title}}</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li {% if home %} class="active" {% endif %}>
                        <a href="{{index-uri}}">Home</a>
                    </li>
                    <li {% if archives %} class="active" {% endif %}>
                        <a href="{{archives-uri}}">Archives</a>
                    </li>
                    {% for nav-page in navbar-pages %}
                    <li {%ifequal page.uri nav-page.uri %} class="active" {% endifequal %}>
                        <a href="{{nav-page.uri}}">{{nav-page.title}}</a>
                    </li>
                    {% endfor %}
                    <li><a href="{{rss-uri}}">RSS</a></li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
        <!--/.container-fluid -->
    </nav>

    <div class="container">
        {% if appeal-uri %}
        <div id="phone-appeal" class="appeal"><a href="{{appeal-uri}}">Please support me!</a></div>
        {% endif %}
        <div class="row">
            <div class="col-lg-9">
                <div id="content">{% block content %} {% endblock %}</div>
            </div>

            <div class="col-md-3">
                <div id="sidebar">
                    {% if appeal-uri %}
                    <div id="appeal" class="appeal">
                        <h3>Please support me!</h3>
                        <p>
                            <b>You can support me to continue writing this
                                blog
                                <a href="{{appeal-uri}}">here</a>.</b>
                        </p>
                    </div>
                    {% endif %}
                    {% if verification-uri %}
                    <div id="verification">
                        <p>
                            My identity is verified by the
                            <a href="https://gaza-verified.org/people/@NOUR_GAZA_s2@mastodon.social/">Gaza Verified
                                project</a>.
                        </p>
                    </div>
                    {% endif %}
                    {% if latest-posts|not-empty %}
                    <div id="recent">
                        <h3>Recent Posts</h3>
                        <ul>
                            {% for post in latest-posts %}
                            <li>
                                <a href="{{post.uri}}">{{post.title}}</a>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %} {% if tags|not-empty %}
                    <div id="tags">
                        <h3>Tags</h3>
                        <ul>
                            {% for tag in tags|sort-by:name %}
                            <li><a href="{{tag.uri}}">{{tag.name}}</a></li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        <footer>
            Copyright &copy; {{today|date:yyyy}} {{author}}
            <p style="text-align: center">
                Powered by <a href="http://cryogenweb.org">Cryogen</a>
            </p>
        </footer>
    </div>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    {% script "js/highlight.pack.js" %}
    <script>
        hljs.initHighlightingOnLoad();
    </script>
    {% if post.klipse %} {{post.klipse|safe}} {% endif %} {% if page.klipse
    %} {{page.klipse|safe}} {% endif %}
</body>

</html>