{% block component_styles %}
{{ super() }}
<link rel="stylesheet" href="/styles/components/site-timeline.css">
<link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
{% endblock component_styles %}

{# Build a list of pages to work with #}
{# {% set all_pages = [] %}
{% set all_pages = all_pages + %} #}
{% set blog_section = get_section(path="blog/_index.md") %}
{% set music_ewp_section = get_section(path="music/evan-pratten/_index.md") %}
{% set music_rtl_section = get_section(path="music/retrylife/_index.md") %}
{% set photo_section = get_section(path="photography/_index.md") %}
{% set software_section = get_section(path="software/_index.md") %}

{# Combine pages #}
{% set all_pages = [] %}
{% set all_pages = all_pages | concat(with=blog_section.pages) %}
{% set all_pages = all_pages | concat(with=music_ewp_section.pages) %}
{% set all_pages = all_pages | concat(with=music_rtl_section.pages) %}
{% set all_pages = all_pages | concat(with=photo_section.pages) %}
{% set all_pages = all_pages | concat(with=software_section.pages) %}

{# Sort and group #}
{% set all_pages = all_pages | sort(attribute="date") | reverse %}
{% set map = all_pages | group_by(attribute="year") %}
{% set_global years = [] %}
{% for year, ignored in map %}
{% set_global years = years | concat(with=year) %}
{% endfor %}

{# Iterate all pages #}
{% for year in years %}
{% set pages = map[year] %}
{# Per-year heading #}
<h2>{{year}}</h2>
<ul class="timeline-list">
    {% for page in pages %}
    {% if not page.draft %}
    {% if not page.extra.hidden %}

    {# Determine the appropriate outlink #}
    {% if page.extra.redir_to %}
    {% set page_path = page.extra.redir_to %}
    {% else %}
    {% set page_path = page.path %}
    {% endif %}

    <li class="timeline-item">
        <div class="timeline-datestamp">
            {# Informational icon #}
            {% if page.extra.icon %}
            <i class="{{page.extra.icon}}"></i>
            {% else %}
            <i class="las la-book"></i>
            {% endif %}

            {# Datestamp #}
            <span class="gray monospace">{{page.date}}:</span>
        </div>


        {# Title #}
        <br class="mobile-linebreak" style="display: none;">
        <a href="{{page_path}}" class="timeline-title" {% if page.extra.redir_to %} target="_blank" {% endif %}>
            {{page.title}}

            {# If the page is a redirect, show the outlink icon #}
            {% if page.extra.redir_to %}
            <i class="las la-external-link-alt"></i>
            {% endif %}
        </a>
        <br>

        {# Additonal info #}
        {% if page.extra.excerpt %}
        <blockquote class="timeline-description">{{page.extra.excerpt}}</blockquote>
        {% elif page.description %}
        <blockquote class="timeline-description">{{page.description}}</blockquote>
        {% endif %}
        {#
        <hr> #}
    </li>
    {% endif %}
    {% endif %}
    {% endfor %}
</ul>
{% endfor %}