<div class="banner banner-accompanying-course">
	<div id="header-accompanying_course-name" class="header-name">
		<div class="container-xxl">
			<div class="row">
				<div class="col-md-6 ps-md-5 ps-xxl-0">
                    <div class="row">
                        <div class="col-12">
                            <h1>
                                <i class="fa fa-random fa-fw"></i>
                                {{ 'Accompanying Course'|trans }}
                                <span class="id-number">({{ 'accompanying_period.number'|trans({ 'id': accompanyingCourse.id}) }})</span>
                            </h1>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div id="persons-associated-shortlist"></div>
                        </div>
                    </div>

				</div>

				{# vue teleport fragment here #}
				<div class="col-md-3 mt-3 mb-1 my-md-3" id="banner-flags"></div>

				{# vue teleport fragment here #}
				<div class="col-md-3 mt-1 mb-3 my-md-3 pe-md-5 pe-xxl-0" id="banner-status"></div>

			</div>
		</div>

	</div>
	<div id="header-accompanying_course-details" class="header-details">
		<div class="container-xxl">
			<div class="row">
                <div class="col-md-12 px-md-5 px-xxl-0">
                    <div id="ACHeaderSlider" class="carousel carousel-dark slide" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            <div class="carousel-item active">
                                <div id="banner-social-issues" class="col-11"></div>
                            </div>
                            <div class="carousel-item">
                                {# vue teleport fragment here #}
                                <div id="banner-persons-associated" class="col-11"></div>
                            </div>
                        </div>
                        <button class="carousel-control-prev justify-content-end visually-hidden" type="button" data-bs-target="#ACHeaderSlider" data-bs-slide="prev">
                            <span class="to-social-issues" title="{{ 'see social issues'|trans }}"></span>
                        </button>
                        <button class="carousel-control-next justify-content-end visually-hidden" type="button" data-bs-target="#ACHeaderSlider" data-bs-slide="next">
                            <span class="to-persons-associated" title="{{ 'see persons associated'|trans }}"></span>
                        </button>
                    </div>
                </div>

			</div>
		</div>
	</div>
	<a id="banner-accompanying-course"></a>
</div>
