@model MultipleChoiceTrainer.Models.HomeViewModel
<h2>Kursübersicht</h2>
<div class="row">
    <div class="col-12 col-md-3">
        <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
            @foreach (var category in Model.Categories)
            {
                <a class="nav-link @if(category.Id == Model.SelectedCategoryId) { <text>active</text>}" id="v-pills-@category.Id-tab" data-toggle="pill" href="#v-pills-@category.Id" role="tab" aria-controls="v-pills-@category.Id" @if (category.Id == Model.SelectedCategoryId) { <text> aria-selected="true" </text> }>@category.Name</a>
            }
            <a href="@Url.Action("Create", "Categories")" class="nav-link"><i class="fal fa-plus"></i> Kurs hinzufügen</a>
        </div>
    </div>
    <div class="col-9">
        <div class="tab-content" id="v-pills-tabContent">
            @foreach (var category in Model.Categories)
            {
                <div class="tab-pane fade @if(category.Id == Model.SelectedCategoryId) { <text>show active</text>}" id="v-pills-@category.Id" role="tabpanel" aria-labelledby="v-pills-@category.Id-tab">
                    <h3>@category.Name <small class="text-muted">@category.Description</small></h3>

                    <p class="text-black-50">
                        <a asp-action="edit" asp-controller="Categories" asp-route-id="@category.Id" class="text-black-50"><i class="far fa-edit"></i> Kurs bearbeiten</a> &nbsp;&nbsp;&nbsp;
                        <a asp-action="create" asp-controller="Sections" asp-route-categoryId="@category.Id" class="text-black-50"><i class="far fa-plus"></i> Lektion hinzufügen</a> &nbsp;&nbsp;&nbsp;
                        <a asp-action="create" asp-controller="Sections" asp-route-categoryId="@category.Id" class="text-black-50"><i class="far fa-map-marker-question"></i> Quiz starten</a>
                    </p>

                    <div class="list-group">
                        @foreach (var sub in category.Sections)
                        {
                            <ul class="list-group-item list-group-item-action">
                                <div class="d-flex w-100 justify-content-between">
                                    <h5 class="mb-1">@sub.Name <small class="text-muted">@sub.Description</small></h5>
                                    <small><a asp-action="list" asp-controller="questions" asp-route-sectionId="@sub.Id" class="text-decoration-none text-black-50">@sub.Questions.Count() Fragen</a></small>
                                </div>
                                <p class="text-black-50">
                                    <a asp-action="edit" asp-controller="Sections" asp-route-id="@sub.Id" class="text-black-50"><i class="far fa-edit"></i> Lektion bearbeiten</a> &nbsp;&nbsp;&nbsp;
                                    <a asp-action="create" asp-controller="Questions" asp-route-sectionId="@sub.Id" class="text-black-50"><i class="far fa-plus"></i> Frage hinzufügen</a> &nbsp;&nbsp;&nbsp;
                                    <a asp-action="create" asp-controller="Sections" asp-route-categoryId="@category.Id" class="text-black-50"><i class="far fa-map-marker-question"></i> Quiz starten</a>
                                </p>
                            </ul>
                        }
                    </div>

                </div>
            }
        </div>
    </div>
</div>