{#
# Copyright © 2022 by Biblica, Inc. (https://www.biblica.com)
# Licensed under MIT (https://opensource.org/licenses/MIT)
#}
{% if sectionData != null and sectionData.show %}

	<div class="bible-api">
		<div class="col col-md-{{ sectionData.columns }} version version-{{ sectionData.isPrimaryPassage ? 'primary' : 'secondary' }}" data-translation="{{ sectionData.translationId }}" data-book="{{ sectionData.book == null ? 'unknown' : sectionData.book.name }}" data-chapter="{{ sectionData.chapter == null ? 'unknown' : sectionData.chapter.name }}">
			<div class="header clearfix">
				{% if sectionData.translationDropDownItems|length > 1 %}
				<div class="version-selector clearfix">
					<h2>{{ sectionData.translationName|raw }}</h2>

					<div class="btn-group {{ sectionData.showCloseButton ? 'btn-group-close' }}">
						<div class="select select-bordered select-link">
							<select class="form-control" name="passage-translation">
								<option value="" selected hidden disabled>{{ sectionData.translationAbbreviation }}</option>
								{% for item in sectionData.translationDropDownItems %}
								<option value="{{ item.value }}">{{ item.text|raw }}</option>
								{% endfor %}
							</select>
            			</div>
						{% if sectionData.showCloseButton %}
							<a class="btn btn-close" href="{{ sectionData.closeUrl }}" aria-label="{{ strings['/biblica/templates/rtb/hideLabel'] }}">
								<svg width="14" height="14" viewbox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
									<path d="M12.25 1.75L1.75 12.25" stroke="white" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
									<path d="M1.75 1.75L12.25 12.25" stroke="white" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"/>
								</svg>
							</a>
						{% endif %}
					</div>

					<ul class="tools">
						{% if sectionData.showToolsAndPaging %}
							{% if sectionData.showAudioPlayer %}
							<li class="listen">
								<a class="btn-rounded btn-bordered toggle-link" href="#listen-{{ sectionData.isPrimaryPassage ? 'primary' : 'secondary' }}" aria-label="{{ strings['/biblica/templates/rtb/tools/listenLabel'] }}">
									<svg width="25" height="24" viewbox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
										<path class="path-fill" d="M2.9158 14.3597C2.04434 12.9072 2.04434 11.0928 2.9158 9.64034V9.64034C3.18172 9.19712 3.62228 8.88665 4.12912 8.78529L6.19838 8.37144C6.32166 8.34678 6.43278 8.28066 6.51327 8.18408L9.04215 5.14942C10.4875 3.41501 11.2102 2.5478 11.8551 2.78129C12.5 3.01479 12.5 4.14364 12.5 6.40134L12.5 17.5987C12.5 19.8564 12.5 20.9852 11.8551 21.2187C11.2102 21.4522 10.4875 20.585 9.04215 18.8506L6.51327 15.8159C6.43278 15.7193 6.32166 15.6532 6.19838 15.6286L4.12912 15.2147C3.62228 15.1133 3.18173 14.8029 2.9158 14.3597V14.3597Z"/>
										<path class="path-stroke" d="M15.5989 7.67857C16.7391 8.81873 17.3824 10.3633 17.3888 11.9757C17.3952 13.5881 16.764 15.1377 15.6329 16.2868" stroke-width="2" stroke-linecap="round"/>
										<path class="path-stroke" d="M20.6362 5.08601C22.4604 6.91026 23.4898 9.38156 23.4999 11.9614C23.5101 14.5413 22.5003 17.0206 20.6904 18.8592" stroke-width="2" stroke-linecap="round"/>
									</svg>
								</a>
							</li>
							{% endif %}
						{%  endif %}
						{% if sectionData.showCompareTranslationsDropDown %}
							<li>
								<div class="btn-group compare-selector">
									<div class="select select-bordered select-link">
										<svg class="svg-icon-start" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
											<path fill-rule="evenodd" clip-rule="evenodd" d="M17 23C17 23.5523 16.5523 24 16 24H8C7.44772 24 7 23.5523 7 23C7 22.4477 7.44772 22 8 22H16C16.5523 22 17 22.4477 17 23Z" fill="#2D3336"></path>
											<path fill-rule="evenodd" clip-rule="evenodd" d="M15 20C15 20.5523 14.5523 21 14 21H10C9.44772 21 9 20.5523 9 20C9 19.4477 9.44772 19 10 19H14C14.5523 19 15 19.4477 15 20Z" fill="#2D3336"></path>
											<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4.37114e-08C12.5523 6.78525e-08 13 0.447716 13 1L13 19C13 19.5523 12.5523 20 12 20C11.4477 20 11 19.5523 11 19L11 1C11 0.447716 11.4477 1.95703e-08 12 4.37114e-08Z" fill="#2D3336"></path>
											<path fill-rule="evenodd" clip-rule="evenodd" d="M20 5C20 5.55228 19.5523 6 19 6H5C4.44772 6 4 5.55228 4 5C4 4.44772 4.44772 4 5 4H19C19.5523 4 20 4.44772 20 5Z" fill="#2D3336"></path>
											<path fill-rule="evenodd" clip-rule="evenodd" d="M8.73188 12.2499L4.49998 4.39062L0.268072 12.2499H0C0 14.7352 2.01472 16.7499 4.5 16.7499C6.98528 16.7499 9 14.7352 9 12.2499H8.73188ZM6.46037 12.2499L4.49998 8.60915L2.53958 12.2499H6.46037Z" fill="#2D3336"></path>
											<path fill-rule="evenodd" clip-rule="evenodd" d="M23.7319 12.2499L19.5 4.39062L15.2681 12.2499H15C15 14.7352 17.0147 16.7499 19.5 16.7499C21.9853 16.7499 24 14.7352 24 12.2499H23.7319ZM21.4604 12.2499L19.5 8.60915L17.5396 12.2499H21.4604Z" fill="#2D3336"></path>
										</svg>
										<select class="form-control" name="compare-translation">
											<option value="" selected hidden disabled>{{ strings['/bible-reader/compare-with-label'] }}</option>
											{% for item in sectionData.compareTranslationDropDownItems %}
											<option value="{{ item.value }}">{{ item.text|raw }}</option>
											{% endfor %}
										</select>
									</div>
								</div>
							</li>
						{% endif %}
					</ul>
				</div>
				{% endif %}

				{% if sectionData.showToolsAndPaging %}
					<div class="listen" id="listen-{{ sectionData.isPrimaryPassage ? 'primary' : 'secondary' }}" style="display: none;">
						{% if sectionData.showAudioPlayer %}
							<audio class="bible-audio-player" style="width:100%;" controls="controls" data-bible-id="{{ sectionData.audioBibleId }}" data-chapter-id="{{ sectionData.passage.audio[0].osis }}"></audio>
              <p class="audio-preloader">Loading...</p>
						{% endif %}
						{% if sectionData.showNoAudioMessage %}
							<p>{{ strings['/biblica/templates/rtb/noAudioText'] }}</p>
						{% endif %}
					</div>

					<div class="paging">
						<a class="btn-rounded btn-bordered next" href="{{ sectionData.nextChapterLink.url }}" aria-label="{{ sectionData.nextChapterLink.text }}">
							<svg width="25" height="24" viewbox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M9.125 5.25L15.875 12L9.125 18.75" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							</svg>
						</a>
						<a class="btn-rounded btn-bordered prev" href="{{ sectionData.previousChapterLink.url }}" aria-label="{{ sectionData.previousChapterLink.text }}">
							<svg width="25" height="24" viewbox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
								<path d="M15.875 18.75L9.125 12L15.875 5.25" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
							</svg>
						</a>
						<h3>{{ sectionData.passage.name }}</h3>
					</div>
				{%  endif %}

			</div>

			{% if sectionData.showMissingPassageText %}
				<div class="missing-content">
					<h4>{{ data.missingPassageText }}</h4>
				</div>
			{% endif %}

			{% if sectionData.showPassage %}
				<div class="{{ sectionData.bibleWrapperClasses }} content" dir="{{ sectionData.translationIsRightToLeft ? 'rtl' : 'ltr' }}">
					{{ sectionData.filteredContent|raw }}
				</div>
			{%  endif %}

			<div class="references">

				{% if sectionData.showFootnotes %}
					<h4>{{ strings['/biblica/templates/rtb/footnotesHeading'] }}</h4>
					<ol type="a">
						{% for footnote in sectionData.passage.footnotes %}
							<li id="{{ footnote.id }}">
								<a href="#{{ footnote.referenceId }}">{{ footnote.verse }}</a>
								{{ footnote.content|raw }}
								{#<strong>{{ footnote.verse }}</strong> {{ footnote.content|raw }}#}
							</li>
						{% endfor %}
					</ol>
				{% endif %}

				{% if sectionData.showCrossReferences %}
					<h4>{{ data.strings['/biblica/templates/rtb/crossReferencesHeading'] }}</h4>
					<ol type="A">
						{% for item in sectionData.passage.crossReferences %}
							<li id="{{ item.id }}">
								<a href="#{{ item.referenceId }}">{{ item.verse }}</a>:
								<a href="?osis={{ (sectionData.translationId|lower ~ ':' ~ item.osis)|e('url') }}">{{ item.content }}</a>
							</li>
						{% endfor %}
					</ol>
				{% endif %}

			</div>
		</div>
	</div>
{% endif %}