{% extends 'Nordinfo/Main/base.html.twig' %}
{% block title %}Mes centres d'intérêts - Nord Info
{% endblock %}
{% block body_class %}bodyTopics
{% endblock %}
{% block header_epingles %}
{{ include('Lenord/Main/parts/epingles.html.twig') }}
{% endblock %}
{% block header_breadcrumb %}
{{ include('Nordinfo/Main/parts/breadcrumb.html.twig') }}
{% endblock %}
{% block body %}
<main role="main" id="mainContent" tabindex="-1" class="pT mBXL">
{% if referer is not null %}
{% set url_back = referer %}
{% else %}
{% set url_back = path('info') %}
{% endif %}
{% include 'Nordinfo/Main/parts/back_btn.html.twig' with {'back_btn_class':'_list-page'} %}
{% if referer is not null %}
<div class="d-block d-md-none" style="padding-bottom:60px;"></div>
{% endif %}
<div class="container">
{% if app.user is not null and app.user.role != 'public'%}
<div class="wrapperTopics">
<h1>Mes centres d'intérêt</h1>
<div class="profileDesc">
<div class="__left">
<svg xmlns="http://www.w3.org/2000/svg" width="11.326" height="14.886" viewBox="0 0 11.326 14.886">
<path id="Path_113" data-name="Path 113" d="M576.44,386.949c0-.3-.008-.556,0-.815a2.244,2.244,0,0,1,1.259-1.993,3.054,3.054,0,0,1,1.974-.214,2.245,2.245,0,0,1,1.862,2.066c.034.962.013,1.925.015,2.888a.552.552,0,0,1-.032.121h-.351q-3.062,0-6.125,0a1.556,1.556,0,0,0-1.7,1.633q-.026,2.484,0,4.969a1.518,1.518,0,0,0,1.592,1.607q4.059.015,8.118,0a1.5,1.5,0,0,0,1.585-1.551c.024-1.695.021-3.39,0-5.085a1.515,1.515,0,0,0-1.35-1.548c-.062-.012-.124-.031-.2-.049,0-.991.018-1.963-.005-2.935a3.7,3.7,0,0,0-1.228-2.677,4.074,4.074,0,0,0-3.141-1.027,3.8,3.8,0,0,0-3.494,2.279,4.444,4.444,0,0,0-.319,2.328Z" transform="translate(-573.332 -382.335)" fill="#46aa00"></path>
</svg>
</div>
<div class="__right">
<p>
Ce symbole indique les contenus qui vous sont réservés selon mes niveau de droits :
</p>
</div>
</div>
<div class="pb-4"></div>
</div>
<div class="wrapperTopics">
<h2>Je choisis un ou plusieurs centres d'intérêt</h2>
</div>
{% else %}
<div class="wrapperTopics">
<h1>Je choisis un ou plusieurs centres d'intérêt</h1>
</div>
{% endif %}
</div>
<div class="pb-4"></div>
<div class="container">
<div class="topicsListContainer" id="topicsList">
<div class="topicsList" aria-label="{% for topic in topics %}{% if topic.id in checkTopics %}{{ topic.displayName }}, {% endif %}{% endfor %}">
<div class="__inner">
<ul>
{% for topic in topics %}
{% if topic.kind != 'all' %}
<li>
<button href="#" class="button_select_topic select_topic {% if topic.id in checkTopics %}active{% endif %}" aria-pressed="{% if topic.id in checkTopics %}true{% else %}false{% endif %}" id="{{ topic.id }}">
<span>{{ topic.displayName }}</span>
</button>
</li>
{% endif %}
{% endfor %}
</ul>
<div class="topicsList-loading" id="topicsListLoader" style="display:none;">
<span class="loader">Chargement en cours</span>
</div>
</div>
<div class="pb-4"></div>
<div class="pb-4"></div>
<div class="sectionSearchState">
<div class="__btn">
<a href="{{ path('info') }}" class="btn btnFormSubmit _narrow">
<span class="__text">Valider mes centres d'intérêt</span>
</a>
</div>
</div>
</div>
</div>
</div>
{{ include('Nordinfo/Main/parts/cookieManager.js.html.twig') }}
</main>
{% endblock %}