{% extends "base.html.twig" %}

 {% block stylesheets %}
	 <link href="{{ asset("stylesheets/app.css") }}" rel="stylesheet" type="text/css" media="screen"/>
 {% endblock %}

{% block body %}
	<div class="header navbar navbar-expand-lg navbar-dark">
		<button class="navbar-toggler" type="button">
			<i class="fa fa-bars fa-lg" aria-hidden="true"></i>
		</button>

		<a href="{{ path('home_redirect') }}" class="header-seperation">
			<img src="{{ asset("images/43-white.svg") }}" class="logo" alt="43ForFree"/>
		</a>

		<ul class="nav flex-grow-1 d-none d-sm-flex">
		</ul>

		<ul class="nav user-nav">
			<li>
				<div class="dropdown">
					<a class="dropdown-toggle user-dropdown" id="dropdownMenuButton"
					   data-toggle="dropdown"
					   aria-haspopup="true" aria-expanded="false">
						<div class="user-icon">
							<i class="ski ski-user" aria-hidden="true"></i>
						</div>
						<div class="user-name">{{ app.user.username }}</div>
					</a>
					<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
						<a class="dropdown-item" href="{{ path("fos_user_profile_show") }}">
							<i class="fa fa-fw fa-user"></i> Adatlap
						</a>
						<a class="dropdown-item" href="{{ path("fos_user_change_password") }}">
							<i class="fa fa-fw fa-lock"></i> Jelszóváltoztatás
						</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="{{ path("fos_user_security_logout") }}">
							<i class="fa fa-fw fa-power-off"></i> Kijelentkezés
						</a>
					</div>
				</div>
			</li>
		</ul>
	</div>

	<div class="page-container">
		<div class="page-sidebar">
			<div class="sidebar-header">
				<div class="profile-wrapper">
					<div class="profile-name">
						{{ app.user.name }}
					</div>
					<div class="profile-email">
						{{ app.user.email }}
					</div>
					<button class="sidebar-close" type="button">
						<i class="gi gi-close"></i>
					</button>
				</div>
			</div>
			<div class="sidebar-body page-sidebar-wrapper scrollbar-dynamic" id="main-menu-wrapper">
				{% if false == is_granted("ROLE_PROGRAM_ORGANIZER") %}
					<p class="menu-title">NAVIGÁCIÓ</p>
					{% include "layout/menu_user.html.twig" %}
				{% endif %}
				{% if is_granted("ROLE_PROGRAM_ORGANIZER")%}
					<p class="menu-title">NAVIGÁCIÓ</p>
					{% include "layout/menu_program_organizer.html.twig" %}
				{% endif %}
				{% if is_granted("ROLE_SUPER_ADMIN") %}
					<p class="menu-title">ADMINISZTRÁCIÓ</p>
					{% include "layout/menu_admin.html.twig" %}
				{% endif %}
				<p class="menu-title">Segédanyagok</p>
				<ul>
					<li>
						<a href="https://sport43.hu/documents/erkezes-elotti-informaciok/sport43-regisztracios-utmutato.pdf" target="_blank">
							<i class="fa fa-book" aria-hidden="true"></i>
							<span class="title">
                                Sport43 Regisztrációs útmutató
                            </span>
						</a>
					</li>
				</ul>
			</div>
			<div class="sidebar-footer">
				<span class="name">43 for free</span></span>
				<span class="version">v{{ system_version }}</span>
			</div>
		</div>
		<div class="page-content">
			<div class="content">
				{% if app.session.flashBag.has("success") or app.session.flashBag.has("warning") or app.session.flashBag.has("error") %}
					<div class="row">
						<div class="col-md-6 offset-md-3">
							{% for flashName, style in {success: "success", warning: "warning", error:"danger"} %}
								{% for message in app.session.flashBag.get(flashName) %}
									<div class="alert alert-{{ style }} alert-dismissible fade show" role="alert">
										{% if message is iterable %}
											{{ message.message|trans({}, message.domain) }}
										{% else %}
											{{ message|trans }}
										{% endif %}
										<button type="button" class="close" data-dismiss="alert" aria-label="Close">
											<span aria-hidden="true">&times;</span>
										</button>
									</div>
								{% endfor %}
							{% endfor %}
						</div>
					</div>
				{% endif %}

				{% block content %}
				{% endblock %}
			</div>
		</div>
	</div>
	<div class="page-sidebar-overlay"></div>


	<div class="modal fade" id="removeConfirmModal" tabindex="-1" aria-labelledby="exampleModalLabel"
		 aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">Megerősítés</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					Biztosan törölni szeretné a kiválasztott tételt?
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">Mégse</button>
					<button type="button" class="btn btn-danger remove-confirmed"
							data-dismiss="modal">Törlés megerősítése</button>
				</div>
			</div>
		</div>
	</div>

	<div class="modal fade" id="removeConfirmBookingModal" tabindex="-1" aria-labelledby="exampleModalLabel"
		 aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">Megerősítés</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					A csoportnak van foglalása! <br> Biztosan törölni szeretné a kiválasztott tételt?
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">Mégse</button>
					<button type="button" class="btn btn-danger remove-confirmed"
							data-dismiss="modal">Törlés megerősítése</button>
				</div>
			</div>
		</div>
	</div>
{% endblock %}

{% block javascripts %}
	<script type="text/javascript">
        window.baseURL = "{{ asset("", "no_version") }}";
        window.absoluteBaseURL = "{{ absolute_url(asset("", "no_version")) }}";
        window.systemVersion = "{{ system_version }}";
	</script>
	{% if app.environment == "prod" %}
		<script src="{{ asset("js/app.min.js") }}"></script>
	{% else %}
		<script src="{{ asset("vendor/systemjs/dist/system.js") }}"></script>
		<script src="{{ asset("js/config.js") }}"></script>
		<script type="text/javascript">
            SystemJS.import("js/app.js");
		</script>
	{% endif %}
{% endblock %}