{# @var event \Pimcore\Model\DataObject\Event #}
{% extends 'layouts/layout.html.twig' %}
{% block content %}
{% do pimcore_head_title().set(event.title) %}
{% do pimcore_head_title().append('CESSDA') %}
{% do pimcore_head_title().setSeparator(' - ') %}
<main class="pullc">
<div class="container-xl">
<div class="row">
<div class="col-lg-3 leftpull section-pillar d-none d-lg-block">
<div class="section-title px-3 px-lg-3 ps-lg-0 d-flex flex-column">
<h1 class="mb-lg-5 pt-1 pe-lg-4 mt-5 text-lg-end">
{% if training %}
Training Events
{% else %}
{{ section_title }}
{% endif %}
</h1>
</div>
{% if document.getProperty('training_background') and training is defined and training == true %}
{% if document.getProperty('training_background').getMetadata('Credit') %}
<div class="pillar-credit">
Image:
{{ document.getProperty('training_background').getMetadata('Credit') }}
</div>
{% endif %}
{% elseif document.getProperty('pillar_background') %}
{% if document.getProperty('pillar_background').getMetadata('Credit') %}
<div class="pillar-credit">
Image:
{{ document.getProperty('pillar_background').getMetadata('Credit') }}
</div>
{% endif %}
{% endif %}
</div>
<div class="col-lg-9 ps-lg-5 pe-lg-5 pb-4">
{% if showBreadcrumbs %}
{% set mainNavStartNode = document.getProperty('navigation_root') %}
{% if mainNavStartNode is empty %}
{% set mainNavStartNode = pimcore_document(1) %}
{% endif %}
{% set breadbrumbs = pimcore_build_nav({
active: document,
root: mainNavStartNode
}) %}
{% do app_navigation_enrich_breadcrumbs(breadbrumbs) %}
{% do pimcore_nav_renderer('breadcrumbs').setMinDepth(null) %}
<div class="breadcrumbs mt-3">
<a href="/">Home</a>
/
<a href="/News-and-Events/Events{% if training %}?training=true{% endif %}">
{% if training %}Training
{% endif %}Events</a>
/
Event details
</div>
{% endif %}
<div id="main-content" class="event-detail py-3">
<div class="page-header">
<h1>{{ event.title }}</h1>
</div>
<div class="row">
<div class="col-12 col-lg-7">
<h3 class="pt-3">Summary</h3>
<p>
{{ event.intro }}
</p>
{% if event.image %}
{{ event.image.thumbnail('newsfront').html({'imgAttributes': {
'class': 'eventimg',
'alt': event.title,
},}) | raw }}
{% endif %}
<h3>Description</h3>
{{ event.body|raw }}
{% if event.resources %}
<div class="moreinfo">
<h3>Related resources</h3>
<ul>
{% for resource in event.resources %}
{% if resource.className == 'ResourceCollection' %}
{% for collresource in resource.resource_item %}
<li>
<a href="/Training-Resources/Resource-crd-{{ collresource.id }}">{{ collresource.title }}</a>
{#{ dump(collresource) }#}
</li>
{% endfor %}
{% else %}
<li>
<a href="/Training-Resources/Resource-crd-{{ resource.id }}">{{ resource.title }}</a>
{#{ dump(resource) }#}
</li>
{% endif %}
{% endfor %}
</ul>
</div>
{% endif %}
</div>
<div class="col-12 col-lg-5 pt-3">
<h3>Event details</h3>
<div class="event-detail-grid">
<div class="row">
<div class="col-12">
<div class="row">
<div class="col-4 fw-bold">
Start time
</div>
<div class="col-8">
{{ event.from_time|date("D j M Y H:i T") }}
</div>
</div>
{% if event.to_time %}
<div class="row">
<div class="col-4 fw-bold">
End time
</div>
<div class="col-8">
{{ event.to_time|date("D j M Y H:i T") }}
</div>
</div>
{% endif %}
{% if event.event_type %}
<div class="row">
<div class="col-4 fw-bold">
Type
</div>
<div class="col-8">
{{ event.event_type }}
</div>
</div>
{% endif %}
{% if event.audience %}
<div class="row">
<div class="col-4 fw-bold">
Audience
</div>
<div class="col-8">
{% for audience in event.audience %}
{{ audience }}<br>
{% endfor %}
</div>
</div>
{% endif %}
{% if event.skill_level %}
<div class="row">
<div class="col-4 fw-bold">
Skill level
</div>
<div class="col-8">
{% for level in event.skill_level %}
{{ level }}<br>
{% endfor %}
</div>
</div>
{% endif %}
{% if event.lang %}
<div class="row">
<div class="col-4 fw-bold">
Language
</div>
<div class="col-8">
{{ langOptions[event.lang] }}
</div>
</div>
{% elseif event.event_language and event.old_node_id %}
<div class="row">
<div class="col-4 fw-bold">
Language
</div>
<div class="col-8">
{{ event.event_language }}
</div>
</div>
{% endif %}
{% if event.organiser %}
<div class="row">
<div class="col-4 fw-bold">
Organiser
</div>
<div class="col-8">
{{ event.organiser }}
</div>
</div>
{% endif %}
{% if event.event_url %}
<div class="row">
<div class="col-4 fw-bold">
Website
</div>
<div class="col-8">
<a href="{{ event.event_url }}" target="_blank">Visit website</a>
</div>
</div>
{% endif %}
{% if event.event_registration_url %}
<div class="row">
<div class="col-4 fw-bold">
Registration
</div>
<div class="col-8">
<a href="{{ event.event_registration_url }}" target="_blank">Registration form</a>
</div>
</div>
{% endif %}
</div>
</div>
</div>
{% if event.location %}
<br><h3>Location</h3>
{% do pimcore_head_link().appendStylesheet(asset('static/css/mapbox-gl.css')) %}
{% do pimcore_head_script().appendFile(asset('static/js/mapbox-gl.js')) %}
<div id='map' style='width: 100%; height: 300px;'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1Ijoib3BlbmNvbmNlcHQiLCJhIjoiY2tvODc2aGJ6MDU2NzJvcW1kb3B4cjEzcSJ9.QUUhUq3taMWu-cO99qF3bA';
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/streets-v11', // style URL
center: [
{{ event.location.longitude }}, {{ event.location.latitude }}
], // starting position [lng, lat]
zoom: 9 // starting zoom
});
const marker1 = new mapboxgl.Marker().setLngLat([{{ event.location.longitude }}, {{ event.location.latitude }}]).addTo(map);
</script>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
</main>
{% endblock %}