tesses-cms/Tesses.CMS/Assets/SeasonPage.html

71 lines
2.7 KiB
HTML

<br>
<div class="container">
<ul class="nav nav-underline" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="about-tab" data-bs-toggle="tab" data-bs-target="#about-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">About</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="episode-tab" data-bs-toggle="tab" data-bs-target="#episode-tab-pane" type="button" role="tab" aria-controls="episode-tab-pane" aria-selected="false">Episodes</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="about-tab-pane" role="tabpanel" aria-labelledby="about-tab" tabindex="0">
<br>
<img src="{{seasonthumbnail}}" alt="{{seasonproper}}" width="120" height="214">
<h1>{{seasonproper}}</h1>
<h2>{{showproper}}</h2>
<h2>{{userproper}}</h2>
<hr>
{{if editable}}
<a class="btn btn-primary" href="./edit">Edit</a>
{{end}}
<br>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Description
</button>
</h2>
<br>
<div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p>{{seasondescription}}</p>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="episode-tab-pane" role="tabpanel" aria-labelledby="episode-tab" tabindex="0">
<div class="container-fluid">
<!--thanks to https://stackoverflow.com/a/21678797-->
<style>
ul {
text-decoration: none;
}
li {
display: inline-block;
vertical-align: top;
}
</style>
<br>
<ul>
{{for episode in episodes}}
<li>
<img src="{{episode.thumbnail}}" width="120" height="214"><br><div class="wrapped-link"><a href="./episode/{{episode.episode}}/">{{episode.proper}}</a></div>
</li>
{{ end }}
</ul>
</div>
</div>
</div>
</div>