{% extends 'layout/base.html.twig' %}

{% block nav %}
	{% include 'layout/navbar.html.twig'%}
{% endblock %}
{% block body %}

	<div {{ stimulus_controller('horaires', { urlHorairesDay: path('horaires_day'), urlSiteAvailable: path('available') , urlHijriFromMiladi: path('hijri_from_miladi'), urlMiladiFromHijri: path('miladi_from_hijri'), day: day_now, numberDay:num_day} ) }}>

		<div id="quran-wird" class="text-center m-2 p-3 rounded bg-tertiary text-white">
			<div>
				<p class="arabic mb-1" style="font-size:1.15em;line-height:1.7;">
					لا تنسَ وِرْدَك اليومي من القرآن الكريم
				</p>
				<p class="mb-1" style="font-size:0.9em;opacity:0.9;">
					N'oubliez pas votre wird quotidien du Coran
				</p>
				<p class="mb-1" style="font-size:0.85em;opacity:0.8;">
					Don't forget your daily Quran reading (wird)
				</p>
				<a href="/v2/quran-al-karim" id="quran-wird-link" class="btn btn-sm fw-bold text-white" style="background-color:#1a5c2a;border:1px solid rgba(255,255,255,0.7);">
					<i class="fas fa-book-open me-1 wird-icon"></i>
					Lire - read - اقرأ
				</a>
			</div>
			<div id="quran-vendredi" class="text-center m-1 d-none" data-horaires-target="quranVendredi">
				<div class="row">
					<div class="col bg-tertiary text-white rounded p-1 m-1">
						<a class="text-white" href="/v2/quran-al-karim-293-alkahf-hizb30">
							Sourate Al-kahf -
							<span class="arabic">
								سورة الكهف
							</span>
						</a>
					</div>
				</div>
			</div>
		</div>

		<div id="filter-horaires" class="filter p-2 m-0 mx-2 mt-2 rounded p-1 bg-primary" data-action="swiped-right@window->horaires#getHorairesPreviousDay swiped-left@window->horaires#getHorairesNextDay">
			<div class="row">
				<div class="col col-1 text-white">
					<i class="fas fa-mosque"></i>
				</div>
				<div id="select-masjids" class="col mb-2">
					<select class="form-select form-select-sm" aria-label=".form-select-sm" data-action="change->horaires#getHorairesFromMiladi" data-horaires-target="masjid">
						{% for name,id in masjids %}
							<option value="{{ id}}">
								{{ name}}
							</option>
						{% endfor %}
					</select>
				</div>
			</div>
			<div class="row mb-2">
				<div class="col col-1 text-white">

					<i class="fas fa-calendar-alt"></i>
				</div>
				<div id="select-day-miladi" class="col col-3">
					<select class="form-select form-select-sm" aria-label=".form-select-sm" data-action="change->horaires#getHorairesFromMiladi" data-horaires-target="dayMiladi">
						{% for i in 1..31 %}
							{% if i == date.d_m %}
								<option selected value="{{ i }}">
									{{ i}}
								</option>
							{% else %}
								<option value="{{ i }}">
									{{ i}}
								</option>
							{% endif %}
						{% endfor %}
					</select>
				</div>
				<div id="select-month-miladi" class="col col-5 p-0">
					<select class="form-select form-select-sm" aria-label=".form-select-sm" data-action="change->horaires#getHorairesFromMiladi" data-horaires-target="monthMiladi">
						<option {% if date.m_m == 1 %} selected {% endif %} value="1">
							Janvier
						</option>
						<option {% if date.m_m == 2 %} selected {% endif %} value="2">
							Février
						</option>
						<option {% if date.m_m == 3 %} selected {% endif %} value="3">
							Mars
						</option>
						<option {% if date.m_m == 4 %} selected {% endif %} value="4">
							Avril
						</option>
						<option {% if date.m_m == 5 %} selected {% endif %} value="5">
							Mai
						</option>
						<option {% if date.m_m == 6 %} selected {% endif %} value="6">
							Juin
						</option>
						<option {% if date.m_m == 7 %} selected {% endif %} value="7">
							Juillet
						</option>
						<option {% if date.m_m == 8 %} selected {% endif %} value="8">
							Août
						</option>
						<option {% if date.m_m == 9 %} selected {% endif %} value="9">
							Septembre
						</option>
						<option {% if date.m_m == 10 %} selected {% endif %} value="10">
							Octobre
						</option>
						<option {% if date.m_m == 11 %} selected {% endif %} value="11">
							Novembre
						</option>
						<option {% if date.m_m == 12 %} selected {% endif %} value="12">
							Décembre
						</option>
					</select>
				</div>
				<div id="select-year-miladi" class="col col-3">
					<select class="form-select form-select-sm" aria-label=".form-select-sm" data-action="change->horaires#getHorairesFromMiladi" data-horaires-target="yearMiladi">
						<option value="{{ date.y_m -1 }}">
							{{ date.y_m -1 }}
						</option>
						<option selected value="{{ date.y_m }}">
							{{ date.y_m }}
						</option>
						<option value="{{ date.y_m +1 }}">
							{{ date.y_m +1 }}
						</option>
					</select>
				</div>
			</div>
			<div class="row">
				<div class="col col-1 text-white">
					<i class="fas fa-calendar-alt"></i>
				</div>
				<div id="select-day-hijri" class="col col-3">
					<select class="form-select form-select-sm" aria-label=".form-select-sm" data-action="change->horaires#getHorairesFromHijri" data-horaires-target="dayHijri">
						{% for i in 1..30 %}
							{% if i == date.d_h %}
								<option selected value="{{ i }}">
									{{ i}}
								</option>
							{% else %}
								<option value="{{ i }}">
									{{ i}}
								</option>
							{% endif %}
						{% endfor %}
					</select>
				</div>
				<div id="select-month-hijri" class="col col-5 p-0">
					<select class="form-select form-select-sm" aria-label=".form-select-sm" data-action="change->horaires#getHorairesFromHijri" data-horaires-target="monthHijri">
						<option {% if date.m_h == 1 %} selected {% endif %} value="1">
							Muharram
						</option>
						<option {% if date.m_h == 2 %} selected {% endif %} value="2">
							Safar
						</option>
						<option {% if date.m_h == 3 %} selected {% endif %} value="3">
							Rabi' al-awwal
						</option>
						<option {% if date.m_h == 4 %} selected {% endif %} value="4">
							Rabi' al-thani
						</option>
						<option {% if date.m_h == 5 %} selected {% endif %} value="5">
							Jumada al-oula
						</option>
						<option {% if date.m_h == 6 %} selected {% endif %} value="6">
							Jumada al-akhira
						</option>
						<option {% if date.m_h == 7 %} selected {% endif %} value="7">
							Rajab
						</option>
						<option {% if date.m_h == 8 %} selected {% endif %} value="8">
							Sha'ban
						</option>
						<option {% if date.m_h == 9 %} selected {% endif %} value="9">
							Ramadan
						</option>
						<option {% if date.m_h == 10 %} selected {% endif %} value="10">
							Shawwal
						</option>
						<option {% if date.m_h == 11 %} selected {% endif %} value="11">
							Dhu al-qi'dah
						</option>
						<option {% if date.m_h == 12 %} selected {% endif %} value="12">
							Dhu al-hjjah
						</option>
					</select>
				</div>
				<div id="select-year-hijri" class="col col-3">
					<select class="form-select form-select-sm" aria-label=".form-select-sm" data-action="change->horaires#getHorairesFromHijri" data-horaires-target="yearHijri">
						<option value="{{ date.y_h -1 }}">
							{{ date.y_h -1 }}
						</option>
						<option selected value="{{ date.y_h }}">
							{{ date.y_h }}
						</option>
						<option value="{{ date.y_h +1 }}">
							{{ date.y_h +1 }}
						</option>
					</select>
				</div>
			</div>
			<div class="text-white text-center pt-1">
				<a href="https://hijri-miladi.com" class="text-white text-center">
					Les dates Hijri sont fournies par
					<br>
					<i class="fas fa-hand-pointer"></i>
					hijri-miladi.com
				</a>
			</div>
		</div>

		<div
			id="horaires-day" data-day="{{ day_now }}" class="shadow p-1 text-center" data-horaires-target="horairesDay">
			<!-- Ajax stimulus horaires_controller.js, chargement du partial _horaires-day.html.twig -->
			<p>
				Chargement des horaires en cours ...
			</p>
			<div>
				<a href="{{ path('horaires') }}" class="m-3 btn btn-info text-white link-white">
					<i class="fa fa-refresh" aria-hidden="true"></i>
					Forcer le chargement
				</a>
			</div>

			<p class="m-3 text-info">
				Si rien ne s'affiche aprés avoir forcer le chargement, il se peut que votre navigateur ne supporte pas la nouvelle version de Assalate.
			</p>
			<p class="m-3 text-info">
				Voici le lien pour revenir à l'ancienne version:
			</p>
			<div>
				<a href="/horaires-prieres-v1" class="btn btn-primary m-3 text-white">
					<i class="fas fa-mosque"></i>
					Horaires de prière (Assalate)
				</a>
			</div>
		</div>

		<div class="text-center m-3">
			<a href="{{ path('horaires_month') }}" class="text-primary">
				<i class="fa fa-table" aria-hidden="true"></i>
				Consulter les horaires du mois
			</a>
		</div>

		{# <div class="shadow p-2 mt-2">
							<div
								id="moon-phases" class="text-center rounded p-2 bg-secondary">
								<!-- Ajax stimulus moon_controller.js, chargement du partial _moon.html.twig -->
								<div data-horaires-target="moon"></div>
								<div data-horaires-target="moonInfo"></div>
							</div>
						</div> #}

	</div>

{% endblock %}