{% comment %}
<!-- cspell: words mainnavbuttons subnavbuttons Oneko -->
{% endcomment %}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>nya! {{page.title}}</title>
  <link rel="stylesheet" href="/assets/css/main.css" />
</head>
<body>
        <!-- top bar -->
        <div class="nav-top">
            <a href="/"><img src="/assets/img/cheesebanner.png" alt="high mouse cherishing linux. but fr tho, we need logo and stuff"></a>
            <h1>{{ page.headline }}</h1>
            <form action="#">
                <input type="text" placeholder="Search.." name="search">
                <button type="submit"><i class="nerd nf-fa-search"> </i></button>
            </form>
        </div>

        <!-- everything underneath the top bar -->
         <div class="container-main">
         <div class="sidebar-left">
                <!-- nav menu -->
            <div class="nav-main">
            {% include mainnavbuttons.html %}
            </div>
            <div class="nav-main">
            {% include subnavbuttons.html %}
            </div>
                <!-- icons at the bottom -->
                <div class="nav-icons">
            <a href="https://list.linuxposting.xyz" class="button" id="mbr-btn" target="_blank">
                    <img src="/assets/img/icons/tumblrlist.png">Tumblr List
                    <!-- This links to the list -->
                    <!-- Icon with multiple mice including Molly -->
                    {% comment %}
                    This should be the list for accounts on linuxposting later
                    {% endcomment %}
            </a>
            <a href="https://w.linuxposting.xyz" class="button" id="waf-btn" target="_blank">
                    <img src="/assets/img/icons/wafrn.png">Wafrn
                    <!-- Molly with waffle icon -->
            </a>
            <a href="https://mail.linuxposting.xyz" class="button" id="mail-btn" target="_blank">
                    <img src="/assets/img/icons/email.png">Web Mail
                    <!-- Molly with letter icon -->
            </a>
            {% comment %}
            <!-- This isn't a thing yet -->
            <a href="#" class="button" id="frm-btn" target="_blank">
                    <img src="/assets/img/icon.png">Forum
                    <!-- Molly with music icon -->
            </a>
            {% endcomment %}
                </div>
        </div>
        <div class="content">
            <p>{{ content }}</p>
        </div>

        <div class="sidebar-right">
            <!-- the chapter or link list at the top right -->
            <div class="content-table">
                <h5>Table of Contents</h5>
                {% comment %}
                Table of contents generated by https://github.com/allejo/jekyll-toc .
                The file is included as toc.html in the _includes directory.
                {% endcomment %}
                {% include toc.html html=content %}
            </div>
            <div class="news">
            <div class="news-item">
                <h5>Announcements</h5>
                {% for announcement in site.announce %}
                <p>
                    <a href="{{ announcement.url }}">{{ announcement.headline }}</a>
                </p>
                {% else %}
                <p>No announcements available at the moment.</p>
                {% endfor %}
                </div>
                <div class="news-button-area">
                    <a href="/announcements/" class="button-small">
                        <img src="/assets/img/icon.png">Read More
                    </a>
                    <a href="/announcements/feed.xml" class="button-small">
                        <img src="/assets/img/icon.png">RSS Feed
                        <!-- Pixel Molly with 'RSS icon' icon -->
                    </a>
                </div>
            </div>
            <div class="news">
            <div class="news-item">
                <h5>NEWSLETTER</h5>
                {% for article in site.news %}
                <p>
                    <a href="{{ article.url }}">{{ article.headline }}</a>
                </p>
                {% else %}
                <p>No news articles available at the moment.</p>
                {% endfor %}
            </div>
            <div class="news-button-area">
                <a href="/news/" class="button-small">
                        <img src="/assets/img/icon.png">Read more
                </a>
                <a href="/news/feed.xml" class="button-small">
                        <img src="/assets/img/icon.png">RSS Feed
                        <!-- Pixel Molly with 'RSS icon' icon -->
                </a>
            </div>

        </div>
        </div>
        <!-- Oneko does not like eating mice, just chasing them.
        Molly doesn't mind being chased too much, so it's fine.
        In the future, we might add a molly.gif instead of the
        oneko.gif, so that you play with Molly instead of a
        cat.  -->
        <script src="/assets/js/oneko.js" data-cat="/assets/img/oneko.gif"></script>
</body>
</html>
