{include file="header.xhtml"}

<main id="main">

	{if $smarty.session.med_name !== null}
	<!-- ページタイトル -->
	<div class="container text-center pb-4 pt-5">
		<h3>{$smarty.session.med_name}</h3>
	</div>
	<!-- /ページタイトル -->
	{/if}

	<!-- お知らせ -->
	<div class="container-md px-0 pb-5 pt-5">
		<div class="px-3 py-2 bg-custom text-light"><i class="bi bi-megaphone me-2"></i><span>お知らせ一覧</span></div>
		<ul class="list-group list-group-flush">
			{foreach from=$o.news item=r name=row}
			<li class="list-group-item">
				<span class="badge bg-secondary bg-opacity-50 rounded-0">{$r.news_open_date}</span>
				<span class="badge bg-warning bg-opacity-75 rounded-0 ms-1 me-2">更新</span>
				<span class="align-middle"><a class="text-decoration-none text-custom" href="#" data-bs-toggle="modal"
						data-bs-target="#newsModal" data-bs-news-title="{$r.news_title}"
						data-bs-news-body="{$r.news_body}">{$r.news_title}</a></span>
			</li>
			{/foreach}
		</ul>
	</div>
	<!-- /お知らせ -->

	<!-- お知らせモーダル -->
	<div class="modal fade" id="newsModal" tabindex="-1" aria-labelledby="newsModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
			<div class="modal-content">
				<div class="modal-header">
					<h1 class="modal-title fs-5" id="newsModalLabel">お知らせタイトル</h1>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
				</div>
				<div class="modal-body">
					お知らせ内容
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
				</div>
			</div>
		</div>
	</div>
	<!-- /お知らせモーダル -->

	<!-- タブ -->
	<ul class="scrollable-tabs nav nav-tabs nav-pills mb-4 border-custom" id="pills-tab" role="tablist">
		<div class="scrollable-content">
			{assign var="first_tab_set" value=false}

			{if $o.month_rows|@count > 0}
			<li class="nav-item border-custom" role="presentation">
				<a href="/" class="nav-link px-5 rounded-0 {if !$first_tab_set}active{/if}" id="pills-home-tab"
					data-bs-toggle="pill" data-bs-target="#pills-home" role="tab" aria-controls="pills-home"
					aria-selected="{if !$first_tab_set}true{else}false{/if}">月額</a>
				{assign var="first_tab_set" value=true}
			</li>
			{/if}

			{if $o.year_rows|@count > 0}
			<li class="nav-item border-custom" role="presentation">
				<a href="/" class="nav-link px-5 rounded-0 {if !$first_tab_set}active{/if}" id="pills-year-tab"
					data-bs-toggle="pill" data-bs-target="#pills-year" role="tab" aria-controls="pills-year"
					aria-selected="{if !$first_tab_set}true{else}false{/if}">1年版</a>
				{assign var="first_tab_set" value=true}
			</li>
			{/if}

			{if $o.year2_rows|@count > 0}
			<li class="nav-item border-custom" role="presentation">
				<a href="/" class="nav-link px-5 rounded-0 {if !$first_tab_set}active{/if}" id="pills-2year-tab"
					data-bs-toggle="pill" data-bs-target="#pills-2year" role="tab" aria-controls="pills-2year"
					aria-selected="{if !$first_tab_set}true{else}false{/if}">2年版</a>
				{assign var="first_tab_set" value=true}
			</li>
			{/if}

			{if $o.monthly_buy_go_rows|@count > 0}
			<li class="nav-item border-custom" role="presentation">
				<a href="/" class="nav-link px-5 rounded-0 {if !$first_tab_set}active{/if}" id="pills-monthlybuygo-tab"
					data-bs-toggle="pill" data-bs-target="#pills-monthlybuygo" role="tab" aria-controls="pills-monthlybuygo"
					aria-selected="{if !$first_tab_set}true{else}false{/if}">月額+都度購入</a>
				{assign var="first_tab_set" value=true}
			</li>
			{/if}

			{if $o.buy_go_rows|@count > 0}
			<li class="nav-item border-custom" role="presentation">
				<a href="/" class="nav-link px-5 rounded-0 {if !$first_tab_set}active{/if}" id="pills-buygo-tab"
					data-bs-toggle="pill" data-bs-target="#pills-buygo" role="tab" aria-controls="pills-buygo"
					aria-selected="{if !$first_tab_set}true{else}false{/if}">都度購入</a>
				{assign var="first_tab_set" value=true}
			</li>
			{/if}
		</div>
	</ul>
	<!-- /タブ -->

	<!-- パネル部分 -->
	<div class="tab-content" id="pills-tabContent">
		{assign var="first_tab_set" value=false}

		<!-- 月額コンテンツ一覧 -->
		{if $o.month_rows|@count > 0}
		<div class="tab-pane fade {if !$first_tab_set}show active{/if}" id="pills-home" role="tabpanel"
			aria-labelledby="pills-home-tab" tabindex="0">
			<div class="container-md pb-4">
				<div class="row">
					{foreach from=$o.month_rows item=r name=row}
					<div class="col-md-6">
						<div class="card mb-4 px-3 py-4 rounded-0">
							<div class="row g-0">
								<div class="col-3">
									<img src="{if !empty($r.course_image) } {$r.course_image} {else} /images/l_e_others_501.png {/if}"
										alt="画像" class="img-fluid ">
								</div>
								<div class="col-9 d-flex flex-column">
									<div class="card-body pt-0 pb-1 align-items-start">
										<h5 class="card-title fw-semibold">{$r.course_name}</h5>
									</div>
									<div
										class="card-body card-text d-flex justify-content-between align-items-end pb-0 pe-0">
										<span>月額</span>
										<span>{$r.media_course_price|number_format}円</span>
									</div>
								</div>
								<div class="col-12 mt-2">
									<div class="btn-group d-flex" role="group" aria-label="...">
										<a href="#" class="btn btn-outline-custom rounded-0 me-2" data-bs-toggle="modal"
											data-bs-target="#courseModal" data-bs-course-title="{$r.course_name}"
											data-bs-course-description="{$r.course_description}">コンテンツ説明</a>
										<a href="/payment/select?course_no={$r.course_no}"
											class="btn btn-outline-custom rounded-0">購入</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					{/foreach}
				</div>
			</div>
			{assign var="first_tab_set" value=true}
		</div>
		{/if}

		<!-- 年額コンテンツ一覧 -->
		{if $o.year_rows|@count > 0}
		<div class="tab-pane fade {if !$first_tab_set}show active{/if}" id="pills-year" role="tabpanel"
			aria-labelledby="pills-year-tab" tabindex="0">
			<div class="container-md pb-4">
				<div class="row">
					{foreach from=$o.year_rows item=r name=row}
					<div class="col-md-6">
						<div class="card mb-4 px-3 py-4 rounded-0">
							<div class="row g-0">
								<div class="col-3">
									<img src="{if !empty($r.course_image) } {$r.course_image} {else} /images/l_e_others_501.png {/if}"
										alt="画像" class="img-fluid ">
								</div>
								<div class="col-9 d-flex flex-column">
									<div class="card-body pt-0 pb-1 align-items-start">
										<h5 class="card-title fw-semibold">{$r.course_name}</h5>
									</div>
									<div
										class="card-body card-text d-flex justify-content-between align-items-end pb-0 pe-0">
										<span>1年版</span>
										<span>{$r.media_course_price|number_format}円</span>
									</div>
								</div>
								<div class="col-12 mt-2">
									<div class="btn-group d-flex" role="group" aria-label="...">
										<a href="#" class="btn btn-outline-custom rounded-0 me-2" data-bs-toggle="modal"
											data-bs-target="#courseModal" data-bs-course-title="{$r.course_name}"
											data-bs-course-description="{$r.course_description}">コンテンツ説明</a>
										<a href="/payment/select?course_no={$r.course_no}"
											class="btn btn-outline-custom rounded-0">購入</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					{/foreach}
				</div>
			</div>
			{assign var="first_tab_set" value=true}
		</div>
		{/if}

		<!-- 2年版コンテンツ一覧 -->
		{if $o.year2_rows|@count > 0}
		<div class="tab-pane fade {if !$first_tab_set}show active{/if}" id="pills-2year" role="tabpanel"
			aria-labelledby="pills-2year-tab" tabindex="0">
			<div class="container-md pb-4">
				<div class="row">
					{foreach from=$o.year2_rows item=r name=row}
					<div class="col-md-6">
						<div class="card mb-4 px-3 py-4 rounded-0">
							<div class="row g-0">
								<div class="col-3">
									<img src="{if !empty($r.course_image) } {$r.course_image} {else} /images/l_e_others_501.png {/if}"
										alt="画像" class="img-fluid ">
								</div>
								<div class="col-9 d-flex flex-column">
									<div class="card-body pt-0 pb-1 align-items-start">
										<h5 class="card-title fw-semibold">{$r.course_name}</h5>
									</div>
									<div
										class="card-body card-text d-flex justify-content-between align-items-end pb-0 pe-0">
										<span>2年版</span>
										<span>{$r.media_course_price|number_format}円</span>
									</div>
								</div>
								<div class="col-12 mt-2">
									<div class="btn-group d-flex" role="group" aria-label="...">
										<a href="#" class="btn btn-outline-custom rounded-0 me-2" data-bs-toggle="modal"
											data-bs-target="#courseModal" data-bs-course-title="{$r.course_name}"
											data-bs-course-description="{$r.course_description}">コンテンツ説明</a>
										<a href="/payment/select?course_no={$r.course_no}"
											class="btn btn-outline-custom rounded-0">購入</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					{/foreach}
				</div>
			</div>
			{assign var="first_tab_set" value=true}
		</div>
		{/if}

		<!-- 月額+都度コンテンツ一覧 -->
		{if $o.monthly_buy_go_rows|@count > 0}
		<div class="tab-pane fade {if !$first_tab_set}show active{/if}" id="pills-monthlybuygo" role="tabpanel"
			aria-labelledby="pills-monthlybuygo-tab" tabindex="0">
			<div class="container-md pb-4">
				<div class="row">
					{foreach from=$o.monthly_buy_go_rows item=r name=row}
					<div class="col-md-6">
						<div class="card mb-4 px-3 py-4 rounded-0">
							<div class="row g-0">
								<div class="col-3">
									<img src="{if !empty($r.course_image) } {$r.course_image} {else} /images/l_e_others_501.png {/if}"
										alt="画像" class="img-fluid ">
								</div>
								<div class="col-9 d-flex flex-column">
									<div class="card-body pt-0 pb-1 align-items-start">
										<h5 class="card-title fw-semibold">{$r.course_name}</h5>
									</div>
									<div
										class="card-body card-text d-flex justify-content-between align-items-end pb-0 pe-0">
										<span>月額</span>
										<span>{$r.media_course_price|number_format}円</span>
									</div>
								</div>
								<div class="col-12 mt-2">
									<div class="btn-group d-flex" role="group" aria-label="...">
										<a href="#" class="btn btn-outline-custom rounded-0 me-2" data-bs-toggle="modal"
											data-bs-target="#courseModal" data-bs-course-title="{$r.course_name}"
											data-bs-course-description="{$r.course_description}">コンテンツ説明</a>
										<a href="/cart?course_no={$r.multi_course_no}"
											class="btn btn-outline-custom rounded-0">購入</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					{/foreach}
				</div>
			</div>
			{assign var="first_tab_set" value=true}
		</div>
		{/if}

		<!-- 都度購入コンテンツ一覧 -->
		{if $o.buy_go_rows|@count > 0}
		<div class="tab-pane fade {if !$first_tab_set}show active{/if}" id="pills-buygo" role="tabpanel"
			aria-labelledby="pills-buygo-tab" tabindex="0">
			<div class="container-md pb-4">
				<div class="row">
					{foreach from=$o.buy_go_rows item=r name=row}
					<div class="col-md-6">
						<div class="card mb-4 px-3 py-4 rounded-0">
							<div class="row g-0">
								<div class="col-3">
									<img src="{if !empty($r.course_image) } {$r.course_image} {else} /images/l_e_others_501.png {/if}"
										alt="画像" class="img-fluid ">
								</div>
								<div class="col-9 d-flex flex-column">
									<div class="card-body pt-0 pb-1 align-items-start">
										<h5 class="card-title fw-semibold">{$r.course_name}</h5>
									</div>
									<div
										class="card-body card-text d-flex justify-content-between align-items-end pb-0 pe-0">
										<span>都度購入</span>
										<span>{$r.media_course_price|number_format}円</span>
									</div>
								</div>
								<div class="col-12 mt-2">
									<div class="btn-group d-flex" role="group" aria-label="...">
										<a href="#" class="btn btn-outline-custom rounded-0 me-2" data-bs-toggle="modal"
											data-bs-target="#courseModal" data-bs-course-title="{$r.course_name}"
											data-bs-course-description="{$r.course_description}">コンテンツ説明</a>
										<a href="/payment/select?course_no={$r.course_no}"
											class="btn btn-outline-custom rounded-0">購入</a>
									</div>
								</div>
							</div>
						</div>
					</div>
					{/foreach}
				</div>
			</div>
			{assign var="first_tab_set" value=true}
		</div>
		{/if}
	</div>
	<!-- /パネル部分 -->

	<!-- サイト説明モーダル -->
	<div class="modal fade" id="courseModal" tabindex="-1" aria-labelledby="courseModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title" id="courseModalLabel">サイト説明</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="閉じる"></button>
				</div>
				<div class="modal-body">
					<!-- 動的にコンテンツを挿入 -->
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
				</div>
			</div>
		</div>
	</div>
	<!-- /サイト説明モーダル -->


	<!-- アプリカテゴリー一覧 -->
	<!-- <div class="container-md py-4">
		<div class="text-center pb-3 ">
			<h3>アプリカテゴリー一覧</h3>
		</div>
		<div class="row text-center">
			{foreach from=$o.category item=r name=row}
			<div class="col col-sm-3 col-md-2">
				<a class="d-inline-flex flex-column align-items-center justify-content-center text-bg-info bg-opacity-75 bg-gradient mb-3 text-wrap rounded-1 text-decoration-none"
					style="width:5rem;height:5rem;" href="/">
					<div><i class="bi bi-phone fs-2 text-light"></i></div>
					<div class="text-light" style="font-size:0.8rem;">{$r.course_type_name}</div>
				</a>
			</div>
			{/foreach}
		</div>
	</div> -->
	<!-- /アプリカテゴリー一覧 -->

	<!-- ======= About Us Section ======= -->
	<section id="about" class="about">
		<div class="container">

			<div class="section-title">
				<h3>OPCONとは</h3>
			</div>

			<div class="row">
				<div class="col-lg-6 order-1 order-lg-2">
					<img src="assets/img/about-img.jpg" class="img-fluid" alt="">
				</div>
				<div class="col-lg-6 pt-4 pt-lg-0 order-2 order-lg-1">
					<h3>さまざまな月額コンテンツサービスを携帯電話料金と一緒に決済！</h3>
					<p class="fst-italic">
						OPCONは様々なメーカーと連携しソフトウェア製品から無形のサービスまでを取り扱っております。
						それぞれのサービスの紹介はもちろん、docomo、au、SoftBankのキャリア決済とクレジットカード決済を利用した月額決済が可能です。
					</p>
				</div>
			</div>

		</div>
	</section><!-- End About Us Section -->

	<!-- ======= Frequently Asked Questions Section ======= -->
	<section id="faq" class="faq section-bg">
		<div class="container">

			<div class="section-title">
				<h3>よくある質問</h3>
			</div>

			<ul class="faq-list">

				<li>
					<div data-bs-toggle="collapse" class="collapsed question" href="#faq1">解約の方法がわからない<i
							class="bi bi-chevron-down icon-show"></i><i class="bi bi-chevron-up icon-close"></i></div>
					<div id="faq1" class="collapse" data-bs-parent=".faq-list">
						<p>
							<a href="/cancelattion">解約ページ</a>をご確認下さい。
						</p>
					</div>
				</li>

				<li>
					<div data-bs-toggle="collapse" href="#faq2" class="collapsed question">購入した商品の確認がしたい<i
							class="bi bi-chevron-down icon-show"></i><i class="bi bi-chevron-up icon-close"></i>
					</div>
					<div id="faq2" class="collapse" data-bs-parent=".faq-list">
						<p>
							<a href="/mypage">マイページ</a>から確認ができます。
						</p>
					</div>
				</li>

				<li>
					<div data-bs-toggle="collapse" href="#faq3" class="collapsed question">ログインID、パスワードがわからない <i
							class="bi bi-chevron-down icon-show"></i><i class="bi bi-chevron-up icon-close"></i>
					</div>
					<div id="faq3" class="collapse" data-bs-parent=".faq-list">
						<p>
							<a href="/mypage">マイページ</a>より、以下の手順でログインID、パスワードの確認を行ってください。 ※OPCON
							IDで登録した方のみこちらのフローで確認できます。
						</p>
					</div>
				</li>

				<li>
					<div data-bs-toggle="collapse" href="#faq4" class="collapsed question">ログインできない<i
							class="bi bi-chevron-down icon-show"></i><i class="bi bi-chevron-up icon-close"></i></div>
					<div id="faq4" class="collapse" data-bs-parent=".faq-list">
						<p>
							<a href="/mypage">マイページ</a>より、以下の手順でログインID、パスワードの確認を行ってください。 IDで登録した方のみこちらのフローで確認できます。
						</p>
					</div>
				</li>

				<li>
					<div data-bs-toggle="collapse" href="#faq5" class="collapsed question">
						購入したコンテンツのキーコード（アクティベーションキー・認証キー）を確認したい <i class="bi bi-chevron-down icon-show"></i><i
							class="bi bi-chevron-up icon-close"></i></div>
					<div id="faq5" class="collapse" data-bs-parent=".faq-list">
						<p>
							<a href="/mypage">マイページ</a>から確認できます。
						</p>
					</div>
				</li>

				<li>
					<div data-bs-toggle="collapse" href="#faq6" class="collapsed question">登録情報を変更したい <i
							class="bi bi-chevron-down icon-show"></i><i class="bi bi-chevron-up icon-close"></i>
					</div>
					<div id="faq6" class="collapse" data-bs-parent=".faq-list">
						<p>
							<a href="/mypage">マイページ</a>より、以下の手順で登録情報の変更を行ってください。 ※OPCON IDで登録した方のみこちらのフローで確認できます。
						</p>
					</div>
				</li>

				<li>
					<div data-bs-toggle="collapse" href="#faq7" class="collapsed question">決済番号・注文番号・決済情報番号を確認したい <i
							class="bi bi-chevron-down icon-show"></i><i class="bi bi-chevron-up icon-close"></i>
					</div>
					<div id="faq7" class="collapse" data-bs-parent=".faq-list">
						<p>
							支払方法によって確認方法は異なります。<br>
							ドコモ払い/auかんたん決済/ソフトバンクまとめて支払い
						</p>
					</div>
				</li>

				<li>
					<div data-bs-toggle="collapse" href="#faq8" class="collapsed question">キャリア決済をしていて、携帯電話を解約したらどうなる？<i
							class="bi bi-chevron-down icon-show"></i><i class="bi bi-chevron-up icon-close"></i>
					</div>
					<div id="faq8" class="collapse" data-bs-parent=".faq-list">
						<p>
							<a href="/mypage">マイページ</a>からライセンスを解約して再度ライセンスの再購入をお願いいたします。<br>
							解約方法については、<a href="/cancelattion">解約ページ</a>をご確認下さい。
						</p>
					</div>
				</li>

				<li>
					<div data-bs-toggle="collapse" href="#faq9" class="collapsed question">携帯電話を機種変更したら契約はどうなる？<i
							class="bi bi-chevron-down icon-show"></i><i class="bi bi-chevron-up icon-close"></i>
					</div>
					<div id="faq9" class="collapse" data-bs-parent=".faq-list">
						<p>
							ライセンスは引き続きご利用可能です。<br>
							キャリアを変更した場合は、<a href="/mypage">マイページ</a>からライセンスを解約して再度ライセンスの再購入をお願いいたします。<br>
						</p>
					</div>
				</li>

				<li>
					<div data-bs-toggle="collapse" href="#faq10" class="collapsed question">
						携帯キャリアを乗り換える場合、OPCONの契約はどうなりますか？<i class="bi bi-chevron-down icon-show"></i><i
							class="bi bi-chevron-up icon-close"></i>
					</div>
					<div id="faq10" class="collapse" data-bs-parent=".faq-list">
						<p>
							<a href="/mypage">マイページ</a>からライセンスを解約して再度ライセンスの再購入をお願いいたします。<br>
							解約方法については、<a href="/cancelattion">解約ページ</a>をご確認下さい。
						</p>
					</div>
				</li>

				<li>
					<div data-bs-toggle="collapse" href="#faq11" class="collapsed question">支払い方法を変更方法したい<i
							class="bi bi-chevron-down icon-show"></i><i class="bi bi-chevron-up icon-close"></i>
					</div>
					<div id="faq11" class="collapse" data-bs-parent=".faq-list">
						<p>
							<a href="/mypage">マイページ</a>からライセンスを解約して再度ライセンスの再購入をお願いいたします。<br>
							解約方法については、<a href="/cancelattion">解約ページ</a>をご確認下さい。
						</p>
					</div>
				</li>

			</ul>

		</div>
	</section><!-- End Frequently Asked Questions Section -->

	<!-- ======= Contact Us Section ======= -->
	<section id="contact" class="contact section-bg">
		<div class="container">

			<div class="section-title">
				<h3>お問い合わせ</h3>
			</div>

			<div class="row">

				<div class="col-lg-4 col-md-6">
					<div class="contact-about">
						<h3>Quick Start 株式会社</h3>
						<p>取り扱いコンテンツや料金等のお問い合わせはこちらからお願いします。</p>
					</div>
				</div>

				<div class="col-lg-3 col-md-6">
					<div class="info">
						<div>
							<i class="bi bi-geo-alt"></i>
							<p>〒160-0023<br>東京都新宿区西新宿三丁目3番13号 西新宿水間ビル6階</p>
						</div>

						<div>
							<i class="bi bi-envelope"></i>
							<p>support@opcon.jp</p>
						</div>

						<div>
							<i class="bi bi-phone"></i>
							<p>TEL:050-8888-5560<br>FAX:050-8888-5560</p>
						</div>

					</div>
				</div>

				<div class="col-lg-5 col-md-12">
					<form action="forms/contact.php" method="post" role="form" class="php-email-form">
						<div class="form-group">
							<input type="text" name="name" class="form-control" id="name" placeholder="お名前" required>
						</div>
						<div class="form-group mt-3">
							<input type="email" class="form-control" name="email" id="email" placeholder="メールアドレス"
								required>
						</div>
						<div class="form-group mt-3">
							<input type="text" class="form-control" name="subject" id="subject" placeholder="件名"
								required>
						</div>
						<div class="form-group mt-3">
							<textarea class="form-control" name="message" rows="5" placeholder="内容" required></textarea>
						</div>
						<div class="my-3">
							<div class="loading">Loading</div>
							<div class="error-message"></div>
							<div class="sent-message">Your message has been sent. Thank you!</div>
						</div>
						<div class="text-center"><button type="submit">Send Message</button></div>
					</form>
				</div>

			</div>

		</div>
	</section><!-- End Contact Us Section -->

</main><!-- End #main -->

<!-- お知らせモーダル -->
<script>
	var newsModal = document.getElementById('newsModal')
	newsModal.addEventListener('show.bs.modal', function (event) {
		var button = event.relatedTarget
		var newsTitle = button.getAttribute('data-bs-news-title')
		var newsBody = button.getAttribute('data-bs-news-body')

		var modalTitle = newsModal.querySelector('.modal-title')
		var modalBody = newsModal.querySelector('.modal-body')

		modalTitle.textContent = newsTitle
		modalBody.textContent = newsBody
	})

	var courseModal = document.getElementById('courseModal')
	courseModal.addEventListener('show.bs.modal', function (event) {
		var button = event.relatedTarget
		var courseTitle = button.getAttribute('data-bs-course-title')
		var courseBody = button.getAttribute('data-bs-course-description')

		var modalTitle = courseModal.querySelector('.modal-title')
		var modalBody = courseModal.querySelector('.modal-body')

		modalTitle.textContent = courseTitle
		modalBody.textContent = courseBody
	})
</script>

<style>
	.scrollable-tabs {
		display: flex;
		overflow-x: auto;
		overflow-y: hidden;
		white-space: nowrap;
		flex-wrap: nowrap;
		-webkit-overflow-scrolling: touch;
		position: relative;
		justify-content: start;
	}

	.scrollable-tabs .scrollable-content {
		display: flex;
		justify-content: center;
		margin: auto;
	}

	.scrollable-tabs::-webkit-scrollbar {
		height: 2px;
	}

	.scrollable-tabs::-webkit-scrollbar-thumb {
		background-color: #ccc;
		border-radius: 4px;
	}

	.nav-item {
		flex: 0 0 auto;
	}
</style>

{include file="footer.xhtml"}