<!doctype html>
<html lang="en">

    <head>
        {% include '@head' %}

        <link media="all" rel="stylesheet" href="{{ '/all.css' | path }}" >
        
    </head>

    <body>

        {% include '@before-content--new' %}
        
        <div class="mainContent">
        
            <!-- Start -->
            <div class="bg-white cor-container" style="--page-color: 10, 175, 203">
  
              {% render "@cover--topbar", {title: title, subtitle: subtitle, poster: poster, description: description}, true %}

              <!-- Initiatives -->
              {% if initiatives %}
              <article class="cor-box">
                <h2>Initiatives</h2>
                <div class="cor-switcher items-start">
                {% for initiative in initiatives %}
                  {% render "@card" , {date: initiative.date, titleLevel: "h3", link: initiative.link, title: initiative.link.text, image: initiative.image, cardExtraClass: cardExtraClass } %}
                {% endfor %}
                </div>
              </article>
              {% endif %}
              <!-- /Initiatives -->

              <div role="separator"></div>

              <div class="cor-with-sidenav cor-content">

                {% render "@toc--dynamic" , {nav: contentnav}, true %}

                <main class="cor-containerWithDivider cor-containerWithDivider--space-s">
                  
                  <section class="cor-rich-text">
                  
                    <h2 id="Our goals">Our goals</h2>

                    <p>The final results of the Future of Europe survey will feed into the Conference on the Future of Europe in the spring of 2022, and will also be published on this page.</p>

                    <p>In the meantime, the graphics below show some of the results of the survey so far. In most cases, the statistics are available both as overall figures and also broken down by EU country.</p>

                    <h2>Anim minim exercitation est cillum exercitation commodo</h2>

                    <h3>exercitation commodo</h3>

                    <p>In the meantime, the graphics below show some of the results of the survey so far. In most cases, the statistics are available both as overall figures and also broken down by EU country.</p>

                    <h3>Anim minim exercitation</h3>
                    
                    <p>In the meantime, the graphics below show some of the results of the survey so far. In most cases, the statistics are available both as overall figures and also broken down by EU country.</p>

                    <div class="padding margin-y bg inline-block">
                      {% render "@list", {modifier: "documents", typeoflist: "ul", list: documents} %}
                    </div>

                  </section>

                  <section class="cor-stack">
                    <h2 id="What's on" class="margin-0">What's on</h2>
                    
                    <section>
                      <h3>Latest news</h3>

                      <div class="cor-l-2andlist">
                      {% for newsitem in news %}

                        {% set cardExtraClass = "" %}
                        {% if loop.index < 3 %}
                          {% set cardExtraClass = "bg padding" %}
                        {% endif %}
                        {% render "@card" , {date: newsitem.date, titleLevel: "h4", title: newsitem.title, image: newsitem.image, cardExtraClass: cardExtraClass } %}
                      {% endfor %}
                      </div>

                    </section>

                    <section>

                      <h3>Events</h4>
                      
                      <h4>Upcoming events</h4>

                      <div class="cor-l-2andlist margin-bottom">
                      {% for newsitem in upcomingEvents %}

                        {% set cardExtraClass = "" %}
                        {% if loop.index < 3 %}
                          {% set cardExtraClass = "bg padding" %}
                        {% endif %}
                        {% render "@card" , {date: newsitem.date,  titleLevel: "h5", title: newsitem.title, image: newsitem.image, cardExtraClass: cardExtraClass } %}
                      {% endfor %}
                      </div>

                      <h4>Past events</h4>

                      <div class="cor-containerWithDivider--dotted ">
                      {% for newsitem in pastEvents %}
                        {% render "@card" , {date: newsitem.date, titleLevel: "h5", title: newsitem.title, image: newsitem.image, cardExtraClass: "padding-y--3xs" } %}
                      {% endfor %}
                      </div>

                    </section>

                  </section>
                
                  <section class="cor-stack">
                    <h2 id="opinions" class="margin-0">Opinions</h2>
                    
                    <section>
                      <h3>Adopted opinions</h3>

                      <div class="cor-grid margin-bottom">
                      {% for opinion in adoptedOpinions %}
                        {% render "@card--opinion" , {title: opinion.title, titleLevel: "h4", link: opinion.link, image: opinion.image, rapporteur: opinion.rapporteur, modifier: "opinion", cardExtraClass: "bg" } %}
                      {% endfor %}
                      </div>
                    </section>

                    <section>
                      <h3>Opinions currently in discussion</h3>

                      <div class="cor-containerWithDivider--dotted cor-stack--2xs">
                      {% for newsitem in indiscussionOpinions %}
                        {% render "@card" , {date: newsitem.date,  titleLevel: "h4", title: newsitem.title, image: newsitem.image, cardExtraClass: "padding-y--3xs" } %}
                      {% endfor %}
                      </div>
                    </section>

                  </section>

                  <section class="cor-stack">
                    <h2 id="opinions" class="margin-0">Reports</h2>
                    <div>
                      <ol class="cor-list cor-list--documents list-style-none cor-containerWithDivider--dotted">
                        <li>
                          <a href="document.pdf">14.06.21 European Year of Rail_Abruzzo</a> <small class="cor-list--documents__info">(3 MB - PDF)</small>
                        </li>
                        <li>
                          <a href="document.pdf">14.06.21 Green deal - Building resilient communities</a>  <small class="cor-list--documents__info">(3 MB - PDF)</small>
                        </li>
                        <li>
                          <a href="document.pdf">10.06.21 Green deal - Building resilient communities</a>  <small class="cor-list--documents__info">(3 MB - PDF)</small>
                        </li>
                        <li>
                          {% render "@document--study" %}
                        </li>
                        <li>
                          {% render "@document--study" %}
                        </li>
                        <li>
                          {% render "@document--study" %}
                        </li>
                      </ol>
                    </div>
                  </section>

                  <section>
                    
                    <h2 id="learnmore" class="margin-0">Learn more</h2>

                    <div class="cor-stack">
                      <section>
                        <h3 class="cor-toc-section margin-top">Videos and others</h3>
                        {% render "@videoplayer--withplaylist" %}
                      </section>

                      <section>
                        <h3 class="cor-toc-section margin-top">Related links</h3>
                        <ul class="margin-bottom-0 padding-left">
                          <li><a href="test.be">Link 1</a></li>
                          <li><a href="test.be">Link 2</a></li>
                          <li><a href="test.be">Link 3</a></li>
                        </ul>
                      </section>

                      <section>
                        <h3 class="cor-toc-section margin-top">See also</h3>
                        
                        <div class="cor-stack">
                          <div>
                            <h4>COVID-19</h4>
                            <ul class="padding-left">
                              <li><a href="test.be">Link 1</a></li>
                              <li><a href="test.be">Link 2</a></li>
                              <li><a href="test.be">Link 3</a></li>
                            </ul>
                          </div>

                          <div>
                            <h4>Survey</h4>
                            <ul class="padding-left">
                              <li><a href="test.be">Link 1</a></li>
                            </ul>
                          </div>

                          <div>
                            <h4>USeful resources</h4>
                            <ul class="padding-left">
                              <li><a href="test.be">Link 1</a></li>
                            </ul>
                          </div>
                        </div>
                      </section>

                    </div>

                  </section>

                  <section>
                    <h2 id="contact">Follow us</h2>
                    <a href="test.be" class="txt-3xl">#EUcareers</a> <a href="test.be" class="txt-3xl">#EUcareers</a> <a href="test.be" class="txt-3xl">#EUcareers</a> 
                  </section>

                  <section>
                    <h2 id="contact">Contact</h2>
                    <a href="test.be" class="txt-xl">contact@cor.europa.eu</a>
                  </section>

                  <section>
                    {% render "@share" %}
                  </section>
                  
                
                </main>

              </div>

            </div>

            <!-- End -->

            {% render '@scrolltotop' %}

        </div>
        
        {% include '@after-content' %}


        <script src="https://unpkg.com/@cor-web/cor-design-system/dist/bundle.js"></script>

    </body>

</html>