{% extends 'base.html.twig' %}

{% set pageTitle = "staff"|trans|title %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('styles/staff.css') }}">
{% endblock %}

{% block meta %}
    {% set desc = "staff_intro_description"|trans|capitalize|split('.') %}
    <meta name="description" content='{{ (desc[0] ~ desc[1] ~ ".")|capitalize }}'>
{% endblock %}

{% block content %}

    {% include "components/_intro.html.twig" with {options: {
        title: "staff_intro_title"|trans|title,
        description: "staff_intro_description"|trans,
        skip: ".staff"
    }} %}
    <div class="section-wrapper staff-wrapper">
        <div class="content-section staff">
            {% for staff in getStaff({'intern': false}) %}
            
                {# Get Main Staff Members #}
                {% set staffLang = getLang(staff.getStaffLangs(), app.request) %}
                
                {% if staffLang %}
                    <div class="staff-item">
                        <div class="staff-img"><img src="{{asset('img/staff/'~staff.image)}}" alt="{{staffLang.title}}" onerror="this.style.display='none'"></div>
                        <div class="staff-title">{{staffLang.title}}</div>
                        <div class="staff-role">{{getText(staff.role.identifier, app.request)}}</div>
                    </div>
                {% endif %}
            {% endfor %}
            <div class="divider"></div>
            {% for staff in getStaff({'intern': true}) %}
                
                {# Get Intern Staff Members #}
                
                {% set staffLang = getLang(staff.getStaffLangs(), app.request) %}
                
                {% if staffLang %}
                    <div class="staff-item">
                        <div class="staff-img"><img src="{{asset('img/staff/'~staff.image)}}" alt="{{staffLang.title}}" onerror="this.style.display='none'"></div>
                        <div class="staff-title">{{staffLang.title}}</div>
                        <div class="staff-role">{{getText(staff.role.identifier, app.request)}}</div>
                    </div>
                {% endif %}
            {% endfor %}
        </div>
    </div>
    {% include 'components/_intern-section.html.twig' %}
{% endblock %}

{% block javascripts %}
    <script src="{{asset('js/offices.js')}}"></script>
{% endblock %}