{% extends 'dev/master.twig' %}

{% set header_is_index = true %}

{% block container %}
    <div class="index-menu">
    {% for link in globals.siteInfo.headerNavigation|slice(1) %}
        <a href="{{ link.link }}">{{ link.title }}</a>
    {% endfor %}
    </div>

    <div class="index-featured">
        <div class="index-feature">
            <div class="index-feature-header">
                <a href="/projects" class="index-feature-header-link"></a>
                <div class="index-feature-header-title">Projects</div>
                <div class="index-feature-header-more">More</div>
            </div>
            {% for project in projects %}
                <div class="index-project" style="background-color: {{ project.colour }};">
                    <a href="/projects#{{ project.info.cleanName }}" class="index-project-anchor"></a>
                    <div class="index-project-content">
                        <div class="index-project-name">{{ project.info.name }}</div>
                        {% if project.info.hasSummary %}
                            <div class="index-project-summary">{{ project.info.summary }}</div>
                        {% endif %}
                    </div>

                    <div class="index-project-links">
                        {% if project.info.hasHomePageUrl %}
                            <a class="index-project-link index-project-link-homepage" href="{{ project.info.homePageUrl }}" rel="noopener" target="_blank">Homepage</a>
                        {% endif %}

                        {% if project.info.hasSourceUrl %}
                            <a class="index-project-link index-project-link-repository" href="{{ project.info.sourceUrl }}" rel="noopener" target="_blank">Source</a>
                        {% endif %}

                        {% if project.info.hasDiscussionUrl %}
                            <a class="index-project-link index-project-link-forum" href="{{ project.info.discussionUrl }}" rel="noopener" target="_blank">Discussion</a>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>

        <div class="index-feature">
            <div class="index-feature-header">
                <a href="/contact" class="index-feature-header-link"></a>
                <div class="index-feature-header-title">Contact</div>
                <div class="index-feature-header-more">More</div>
            </div>
            <div class="index-contact">
                {% for contact in contacts %}
                    <div class="social social-{{ contact.name }}" style="--social-colour: {{ contact.colour }}">
                        {% if contact.hasLink %}
                            <a href="{{ contact.link }}" class="social-background" target="_blank" rel="noopener"></a>
                        {% endif %}

                        <div class="social-icon {{ contact.icon }}"></div>
                        <div class="social-content">
                            <div class="social-name">{{ contact.title }}</div>
                            <div class="social-handle">{{ contact.display }}</div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}