{% extends 'portal/base.html' %}
{% load static %}
{% load app_tags banner_tags headline_tags %}

{% block subNav %}
{% banner banner_name="BANNER" %}
{% endblock subNav %}

{% block scripts %}
{{ block.super }}
<script defer type="text/javascript" src="{% static 'portal/js/tenYearMap.js' %}"></script>
{% endblock scripts %}

{% block content %}

<div class="background">
    {% headline headline_name="HEADLINE" %}
</div>

<div class="background container" id="map-container">
    <section class="background background--primary">
        <img title="world map" alt="World map" src="{% static 'portal/img/long_europe_map.png' %}" width="95%"/>
        <button class="map-pin" id="hatfield" onclick="setActivePin('hatfield')" data-target="#carousel-ten-year-map" data-slide-to="0">
            <map-pin id="hatfield-pin" />
        </button>
        <button class="map-pin" id="barcelona" onclick="setActivePin('barcelona')" data-target="#carousel-ten-year-map" data-slide-to="1">
            <map-pin id="barcelona-pin" />
        </button>
        <button class="map-pin" id="krakow" onclick="setActivePin('krakow')" data-target="#carousel-ten-year-map" data-slide-to="2">
            <map-pin id="krakow-pin" />
        </button>
        <button class="map-pin" id="sofia" onclick="setActivePin('sofia')" data-target="#carousel-ten-year-map" data-slide-to="3">
            <map-pin id="sofia-pin" />
        </button>
    </section>
</div>

<div class="background">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div id="carousel-ten-year-map" class="carousel slide">
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-ten-year-map" data-slide-to="0" class="active" onclick="setActivePin('hatfield')"></li>
                        <li data-target="#carousel-ten-year-map" data-slide-to="1" onclick="setActivePin('barcelona')"></li>
                        <li data-target="#carousel-ten-year-map" data-slide-to="2" onclick="setActivePin('krakow')"></li>
                        <li data-target="#carousel-ten-year-map" data-slide-to="3" onclick="setActivePin('sofia')"></li>
                    </ol>

                    <div class="carousel-inner" role="listbox">
                        <div class="item active" id="hatfield-carousel">
                            <div>
                                <div class="col-sm-6 carousel-column--images">
                                    <div class="row carousel-image-wrapper">
                                        <img src="{% static 'portal/img/howe_dell_1.png' %}" class="carousel-image carousel-image--column" alt="Code for Life volunteers outside Howe Dell Primary School">
                                    </div>
                                    <div class="row carousel-image-wrapper">
                                        <img src="{% static 'portal/img/howe_dell_2.png' %}" class="carousel-image carousel-image--column" alt="CfL volunteers outside Howe Dell Primary School showing off their Code for Life T-shirts">
                                    </div>
                                </div>
                                <div class="col-sm-6 carousel-text">
                                    <h4 class="carousel-header">
                                        <b>Howe Dell Primary School, Hatfield, UK</b>
                                    </h4>
                                    <h5>
                                        July 2024
                                    </h5>
                                    <p>
                                        We completed the UK leg of our world tour with an enthusiastic reception from Year 4 students at Howe Dell Primary School
                                        in Hatfield. The pupils were captivated by our presentation on different types of robots and Ocado Group's automation
                                        technology used in sorting and packing deliveries. They were then tasked with designing robots to solve problems, producing
                                        creative concepts like robot childminders and homework helpers. Midway through, we introduced them to coding with Rapid Router,
                                        explaining algorithms and letting them experiment with the levels. The students were thrilled about the competition for the
                                        best robot design, which included a prize of a golden 3D printed medal. Teachers praised the engaging and educational workshop,
                                        while Ocado volunteers found the experience rewarding and beneficial for developing their communication and teaching skills.
                                        The children's designs were exceptional, making the judging process challenging, but ultimately a few standout innovations were
                                        selected.
                                    </p>
                                    <div class="carousel-button">
                                        <a href="https://www.linkedin.com/company/code-for-life-uk/posts/?feedView=all" target="_blank" class="button button--primary button-right-arrow">Learn more</a>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <img src="{% static 'portal/img/howe_dell_3.png' %}" class="carousel-image"" alt="The three winners of Howe Dell Primary School's robot design challenge">
                            </div>
                        </div>
                        <div class="item" id="barcelona-carousel">
                            <div class="col-sm-6 carousel-image-wrapper">
                                <img src="{% static 'portal/img/logo_cfl.png' %}" alt="CFL logo">
                            </div>
                            <div class="col-sm-6 carousel-text">
                                <h5>
                                    Barcelona
                                </h5>
                                <p>
                                    Coming soon!
                                </p>
                            </div>
                        </div>
                        <div class="item" id="krakow-carousel">
                            <div class="col-sm-6 carousel-image-wrapper">
                                <img src="{% static 'portal/img/logo_cfl.png' %}" alt="CFL logo">
                            </div>
                            <div class="col-sm-6 carousel-text">
                                <h5>
                                    Kraków
                                </h5>
                                <p>
                                    Coming soon!
                                </p>
                            </div>
                        </div>
                        <div class="item" id="sofia-carousel">
                            <div class="col-sm-6 carousel-image-wrapper">
                                <img src="{% static 'portal/img/logo_cfl.png' %}" alt="CFL logo">
                            </div>
                            <div class="col-sm-6 carousel-text">
                                <h5>
                                    Sofia
                                </h5>
                                <p>
                                    Coming soon!
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    customElements.define("map-pin", class extends HTMLElement {
        connectedCallback() {
            setTimeout(() => {
                this.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" height="40px" viewBox="0 0 24 24" width="40px" fill="#FFC709">
                                    <path d="M0 0h24v24H0z" fill="none"/>
                                    <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                                </svg>`
            })
        }
    })
</script>

{% endblock content %}
