<!DOCTYPE html>
<html>
    {% assign pageyear = page.url | relative_url | remove: '.html' | remove: '/years/' %}
    <!-- overwrite default title and description -->
    <meta name="apple-mobile-web-app-title" content="{{ pageyear }} | BBC Young Reporter | Reading School">
    <title>{{ pageyear }} | BBC Young Reporter | Reading School</title>
    <meta name="description" content="News articles written by Reading School students in year 8, in {{ pageyear }}">
    <link href="/css/article-list.css" rel="stylesheet">
    <link href="/css/year.css" rel="stylesheet">
    {% include head.html %}
    <body>
        <!-- cookie notice is included automatically -->
        {% include cookie-notice.html %}

        <!-- content of navbar is included via jQuery -->
        {% include navbar.html %}

        <div class="mdc-drawer-app-content">
            {% include top-app-bar.html %}

            <main class="main-content" id="main-content">
                <div class="mdc-top-app-bar--short-fixed-adjust">
                    <div class="year-header parallax-section" data-jarallax data-speed="{{ site.parallax-speed }}" style="background-image: url('/images/backgrounds/{{ pageyear }}.jpg');">
                        <h1 class="mdc-typography--headline1">{{ pageyear }}</h1>
                    </div>
                    <div class="splitter"></div>
                    <div class="article-section">
                        <div class="articles">
                            {% assign articles = site.articles | sort: date | reverse %}
                            {% for article in articles %}
                            {% assign articleyear = article.date | date: "%Y" %}
                            {% if pageyear == articleyear %}
                                {% include mdc-card.html article=article %}
                            {% endif %}
                            {% endfor %}
                        </div>
                    </div>
                    <div class="splitter"></div>
                </div>
            </main>
            {% include footer.html %}
        </div>
    </body>
</html>
