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

{% block page_wrapper_attr %}{{ stimulus_controller('quran', {urlPartial: path('quran_partial')} ) }} data-action="swiped-right@window->quran#getQuranPrevious swiped-left@window->quran#getQuranNext"{% endblock %}

{% block nav %}
	<div id="quran-filter" class="bg-tertiary container pt-1">
		<div id="quran-filter-row1">
			<div class="d-inline-block">
				<select id="quran-surat" class="quran-filter form-select  form-select-sm" data-quran-target="surat" data-action="change->quran#selectSurat">
					<option value="1.1">S1 - Al Fatiha (الفاتحة)</option>
					<option value="2.1">S2 - Al Baqara (البقرة)</option>
					<option value="50.1">S3 - Al Imran (آل عمران)</option>
					<option value="77.1">S4 - Annissaa (النساء)</option>
					<option value="106.1">S5 - Al Maïda (المائدة)</option>
					<option value="128.1">S6 - Al Anaam (الأنعام)</option>
					<option value="151.1">S7 - Al Aaraf (الأعراف)</option>
					<option value="177.1">S8 - Al Anfal (الأنفال)</option>
					<option value="187.1">S9 - Attawba (التوبة)</option>
					<option value="208.1">S10 - Younous (يونس)</option>
					<option value="221.1">S11 - Houd (هود)</option>
					<option value="235.1">S12 - Youssouf (يوسف)</option>
					<option value="249.1">S13 - Arraad (الرعد)</option>
					<option value="255.1">S14 - Ibrahim (ابراهيم)</option>
					<option value="262.1">S15 - Al Hijr (الحجر)</option>
					<option value="267.1">S16 - Annahl (النحل)</option>
					<option value="282.1">S17 - Al Israa (الإسراء)</option>
					<option value="293.1">S18 - Al Kahf (الكهف)</option>
					<option value="305.1">S19 - Mariam (مريم)</option>
					<option value="312.1">S20 - Taha (طه)</option>
					<option value="322.1">S21 - Al Anbiyaa (الأنبياء)</option>
					<option value="332.1">S22 - Al Haj (الحج)</option>
					<option value="342.1">S23 - Al Mouminoun (المؤمنون)</option>
					<option value="350.1">S24 - Annour (النور)</option>
					<option value="359.1">S25 - Al Fourqan (الفرقان)</option>
					<option value="367.1">S26 - Achouaraa (الشعراء)</option>
					<option value="377.1">S27 - Annaml (النمل)</option>
					<option value="385.1">S28 - Al Qassas (القصص)</option>
					<option value="396.1">S29 - Al Ankabout (العنكبوت)</option>
					<option value="404.1">S30 - Arroum (الروم)</option>
					<option value="411.1">S31 - Loqman (لقمان)</option>
					<option value="415.1">S32 - Assajda (السجدة)</option>
					<option value="418.1">S33 - Al Ahzab (الأحزاب)</option>
					<option value="428.1">S34 - Sabaa (سبإ)</option>
					<option value="434.1">S35 - Fatir (فاطر)</option>
					<option value="440.1">S36 - Yassin (يس)</option>
					<option value="446.1">S37 - Assaffat (الصافات)</option>
					<option value="453.1">S38 - Sad (ص)</option>
					<option value="458.1">S39 - Azzoumar (الزمر)</option>
					<option value="467.1">S40 - Ghafir (غافر)</option>
					<option value="477.1">S41 - Fousselat (فصلت)</option>
					<option value="483.1">S42 - Achoura (الشورى)</option>
					<option value="489.1">S43 - Azzoukhrof (الزخرف)</option>
					<option value="496.1">S44 - Addoukhan (الدخان)</option>
					<option value="499.1">S45 - Al Jathya (الجاثية)</option>
					<option value="502.1">S46 - Al Ahqaf (الأحقاف)</option>
					<option value="507.1">S47 - Mohammad (محمد)</option>
					<option value="511.1">S48 - Al Fath (الفتح)</option>
					<option value="515.1">S49 - Al Hojourat (الحجرات)</option>
					<option value="518.1">S50 - Qaf (ق)</option>
					<option value="520.1">S51 - Adharyat (الذاريات)</option>
					<option value="523.1">S52 - Attour (الطور)</option>
					<option value="526.1">S53 - Annajm (النجم)</option>
					<option value="528.1">S54 - Al Qamar (القمر)</option>
					<option value="531.1">S55 - Arrahman (الرحمن)</option>
					<option value="534.1">S56 - Al Waqiaa (الواقعة)</option>
					<option value="537.1">S57 - Al Hadid (الحديد)</option>
					<option value="542.1">S58 - Al Mojadala (المجادلة)</option>
					<option value="545.1">S59 - Al Hachr (الحشر)</option>
					<option value="549.1">S60 - Al Momtahana (الممتحنة)</option>
					<option value="551.1">S61 - Assaf (الصف)</option>
					<option value="553.1">S62 - Al jomouaa (الجمعة)</option>
					<option value="554.1">S63 - Al Monafiqoun (المنافقون)</option>
					<option value="556.1">S64 - Attaghabon (التغابن)</option>
					<option value="558.1">S65 - Attalaq (الطلاق)</option>
					<option value="560.1">S66 - Attahrim (التحريم)</option>
					<option value="562.1">S67 - Al Molk (الملك)</option>
					<option value="564.1">S68 - Al Qalam (القلم)</option>
					<option value="566.1">S69 - Al Haqa (الحاقة)</option>
					<option value="568.1">S70 - Al Maarij (المعارج)</option>
					<option value="570.1">S71 - Nouh (نوح)</option>
					<option value="572.1">S72 - Ajjin (الجن)</option>
					<option value="574.1">S73 - Al Mozammil (المزمل)</option>
					<option value="575.1">S74 - Al Moddathir (المدثر)</option>
					<option value="577.1">S75 - Al Qiyama (القيامة)</option>
					<option value="578.1">S76 - Al Insan (الانسان)</option>
					<option value="580.1">S77 - Al Morsalat (المرسلات)</option>
					<option value="582.1">S78 - Annabaa (النبإ)</option>
					<option value="583.1">S79 - Annaziaat (النازعات)</option>
					<option value="585.1">S80 - Abassa (عبس)</option>
					<option value="586.1">S81 - Attakwir (التكوير)</option>
					<option value="587.1">S82 - Al Infitar (الإنفطار)</option>
					<option value="587.2">S83 - Al Motaffifine (المطففين)</option>
					<option value="589.1">S84 - Al Inchiqaq (الإنشقاق)</option>
					<option value="590.1">S85 - Al Borouj (البروج)</option>
					<option value="591.1">S86 - Attariq (الطارق)</option>
					<option value="591.2">S87 - Al Aala (الأعلى)</option>
					<option value="592.1">S88 - Al Ghachia (الغاشية)</option>
					<option value="593.1">S89 - Al Fajr (الفجر)</option>
					<option value="594.1">S90 - Al Balad (البلد)</option>
					<option value="595.1">S91 - Achams (الشمس)</option>
					<option value="595.2">S92 - Al Layl (الليل)</option>
					<option value="596.1">S93 - Adhoha (الضحى)</option>
					<option value="596.2">S94 - Acharh (الشرح)</option>
					<option value="597.1">S95 - Attine (التين)</option>
					<option value="597.2">S96 - Al Alaq (العلق)</option>
					<option value="598.1">S97 - Al Qadr (القدر)</option>
					<option value="598.2">S98 - Al Bayna (البينة)</option>
					<option value="599.1">S99 - Azzalzala (الزلزلة)</option>
					<option value="599.2">S100 - Al Adyat (العاديات)</option>
					<option value="600.1">S101 - Al Qariaa (القارعة)</option>
					<option value="600.2">S102 - Attakathor (التكاثر)</option>
					<option value="601.1">S103 - Al Asr (العصر)</option>
					<option value="601.2">S104 - Al Homaza (الهمزة)</option>
					<option value="601.3">S105 - Al Fil (الفيل)</option>
					<option value="602.1">S106 - Quoraych (قريش)</option>
					<option value="602.2">S107 - Al Maoune (الماعون)</option>
					<option value="602.3">S108 - Al Kawtar (الكوثر)</option>
					<option value="603.1">S109 - Al Kafiroun (الكافرون)</option>
					<option value="603.2">S110 - Annasr (النصر)</option>
					<option value="603.3">S111 - Al Massad (المسد)</option>
					<option value="604.1">S112 - Al Ikhlas (الإخلاص)</option>
					<option value="604.2">S113 - Al Falaq (الفلق)</option>
					<option value="604.3">S114 - Annas (الناس)</option>
				</select>
			</div>
			<div class="d-inline-block">
				<select id="quran-hizb" class="quran-filter form-select  form-select-sm" data-quran-target="hizb" data-action="change->quran#selectHizb">
					<option value="1">H 1</option>
					<option value="11">H 2</option>
					<option value="22">H 3</option>
					<option value="32">H 4</option>
					<option value="42">H 5</option>
					<option value="51">H 6</option>
					<option value="62">H 7</option>
					<option value="72">H 8</option>
					<option value="82">H 9</option>
					<option value="92">H 10</option>
					<option value="102">H 11</option>
					<option value="112">H 12</option>
					<option value="121">H 13</option>
					<option value="132">H 14</option>
					<option value="142">H 15</option>
					<option value="151">H 16</option>
					<option value="162">H 17</option>
					<option value="173">H 18</option>
					<option value="182">H 19</option>
					<option value="192">H 20</option>
					<option value="201">H 21</option>
					<option value="212">H 22</option>
					<option value="222">H 23</option>
					<option value="231">H 24</option>
					<option value="242">H 25</option>
					<option value="252">H 26</option>
					<option value="262">H 27</option>
					<option value="272">H 28</option>
					<option value="282">H 29</option>
					<option value="292">H 30</option>
					<option value="302">H 31</option>
					<option value="312">H 32</option>
					<option value="322">H 33</option>
					<option value="332">H 34</option>
					<option value="342">H 35</option>
					<option value="352">H 36</option>
					<option value="362">H 37</option>
					<option value="371">H 38</option>
					<option value="382">H 39</option>
					<option value="392">H 40</option>
					<option value="402">H 41</option>
					<option value="413">H 42</option>
					<option value="422">H 43</option>
					<option value="431">H 44</option>
					<option value="442">H 45</option>
					<option value="451">H 46</option>
					<option value="462">H 47</option>
					<option value="472">H 48</option>
					<option value="482">H 49</option>
					<option value="491">H 50</option>
					<option value="502">H 51</option>
					<option value="513">H 52</option>
					<option value="522">H 53</option>
					<option value="531">H 54</option>
					<option value="542">H 55</option>
					<option value="553">H 56</option>
					<option value="562">H 57</option>
					<option value="572">H 58</option>
					<option value="582">H 59</option>
					<option value="591">H 60</option>
				</select>
			</div>
			<div class="d-inline-block">
				<select id="quran-page" class="quran-filter form-select  form-select-sm" data-quran-target="page" data-action="change->quran#selectPage">
					{% for i in 1..604 %}
						<option value="{{i}}">P
							{{i}}</option>
					{% endfor %}
				</select>
			</div>
			</div>{# end row1 #}

			<div id="quran-filter-row2">
			<div id="bt-tafsir-fr" class="d-inline-block translate bg-quaternary">
				<a href="#tafsir-fr-h1" data-turbo="false" class="text-tertiary fw-bold">
					Fr
				</a>
			</div>
			<div id="bt-tafsir-en" class="d-inline-block translate bg-quaternary">
				<a href="#tafsir-en-h1" data-turbo="false" class="text-tertiary fw-bold">
					En
				</a>
			</div>
			<div id="bt-tafsir-ar" class="d-inline-block translate bg-quaternary">
				<a href="#tafsir-ar-h1" data-turbo="false" class="text-tertiary fw-bold">
					ع
				</a>
			</div>
			<div id="bt-tafsir-ay" class="d-inline-block translate bg-quaternary">
				<a href="#" data-turbo="false" class="text-tertiary fw-bold">
					ق
				</a>
			</div>
			<div id="bt-quran-download" class="d-inline-block translate bg-quaternary">
			<a href="#" data-turbo="false" data-action="click->quran#downloadAllImages" id="quran-dl-btn" class="text-tertiary fw-bold" title="Télécharger toutes les pages pour usage hors-ligne">
				<i class="fas fa-download"></i>
			</a>
		</div>
		<div id="bt-clear-cache" class="d-inline-block translate bg-quaternary">
			<a href="?clear-sw" data-turbo="false" class="text-tertiary fw-bold" title="Vider le cache et recharger">
				<i class="fas fa-trash-alt"></i>
			</a>
		</div>
		</div>{# end row2 #}

	</div>{# end quran-filter #}
	<div style="margin-top: 20px">
		{% include 'layout/navbar.html.twig'%}
	</div>
{% endblock %}

{% block body %}

	<div id="quran-al-karim">
		<div id="quran-right-zap" data-action="click->quran#getQuranNext">
			<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-square-right" class="svg-inline--fa fa-caret-square-right fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512">
				<path fill="currentColor" d="M48 32h352c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48zm140.485 355.515l123.029-123.029c4.686-4.686 4.686-12.284 0-16.971l-123.029-123.03c-7.56-7.56-20.485-2.206-20.485 8.485v246.059c0 10.691 12.926 16.045 20.485 8.486z"></path>
			</svg>
		</div>
		<div id="quran-left-zap" data-action="click->quran#getQuranPrevious">
			<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="caret-square-left" class="svg-inline--fa fa-caret-square-left fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512">
				<path fill="currentColor" d="M400 480H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48v352c0 26.51-21.49 48-48 48zM259.515 124.485l-123.03 123.03c-4.686 4.686-4.686 12.284 0 16.971l123.029 123.029c7.56 7.56 20.485 2.206 20.485-8.485V132.971c.001-10.691-12.925-16.045-20.484-8.486z"></path>
			</svg>
		</div>
		<div
			id="quran" data-quran-target="quran" data-action="click->quran#toggleOverlay">
			<!-- partial _quran.html.twig, rendered by quran_controller.js stimulus -->
			<div class="text-center">
				<p>Chargement des horaires en cours ...</p>
				<div>
					<a href="{{ path('quran') }}" 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="/quran-al-karim" data-turbo="false" class="btn btn-primary m-3 text-white">
						<i class="fas fa-quran"></i>
						Coran (Al Quran)</a>
				</div>
			</div>
		</div>
	<div id="quran-bm-edit">
		<div id="bt-bookmarks"></div>
	</div>
	</div>

{% endblock %}