@using CarCareTracker.Helper
@inject IConfigHelper config
@{
    var enableAuth = config.GetUserConfig(User).EnableAuth;
}
@model string
@{
    ViewData["Title"] = "LubeLogger";
}
@section Scripts {
    <script src="~/js/garage.js" asp-append-version="true"></script>
}
<div class="lubelogger-mobile-nav" onclick="hideMobileNav()">
    <ul class="navbar-nav" id="homeTab" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link @(Model == "garage" ? "active" : "")" id="garage-tab" data-bs-toggle="tab" data-bs-target="#garage-tab-pane" type="button" role="tab"><span class="ms-2 display-3"><i class="bi bi-car-front me-2"></i>Garage</span></button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link @(Model == "settings" ? "active" : "")" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings-tab-pane" type="button" role="tab"><span class="ms-2 display-3"><i class="bi bi-gear me-2"></i>Settings</span></button>
        </li>
        @if (User.IsInRole("CookieAuth"))
        {
            @if (User.IsInRole(nameof(UserData.IsAdmin)))
            {
                <li class="nav-item" role="presentation">
                    <a class="dropdown-item" href="/Admin"><span class="display-3 ms-2"><i class="bi bi-people me-2"></i>Admin Panel</span></a>
                </li>
            }
            <li class="nav-item" role="presentation">
                <button class="nav-link" onclick="performLogOut()"><span class="display-3 ms-2"><i class="bi bi-box-arrow-right me-2"></i>Logout</span></button>
            </li>
        }
    </ul>
</div>
<div class="container">
    <div class="row mt-2">
        <div class="d-flex lubelogger-navbar">
            <img src="/defaults/lubelogger_logo.png" />
            <div class="lubelogger-navbar-button">
                <button type="button" class="btn btn-dark" onclick="showMobileNav()"><i class="bi bi-list lubelogger-menu-icon"></i></button>
            </div>
        </div>
    </div>
    <hr />
    <ul class="nav nav-tabs lubelogger-tab" id="homeTab" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link @(Model == "garage" ? "active" : "")" id="garage-tab" data-bs-toggle="tab" data-bs-target="#garage-tab-pane" type="button" role="tab"><i class="bi bi-car-front me-2"></i>Garage</button>
        </li>
        <li class="nav-item ms-auto" role="presentation">
            <button class="nav-link @(Model == "settings" ? "active" : "")" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings-tab-pane" type="button" role="tab"><i class="bi bi-gear me-2"></i>Settings</button>
        </li>
        @if (User.IsInRole("CookieAuth"))
        {
            <li class="nav-item dropdown" role="presentation">
                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false"><i class="bi bi-person me-2"></i>@User.Identity.Name</a>
                <ul class="dropdown-menu">
                    @if (User.IsInRole(nameof(UserData.IsAdmin)))
                    {
                        <li>
                            <a class="dropdown-item" href="/Admin"><i class="bi bi-people me-2"></i>Admin Panel</a>
                        </li>
                    }
                    <li>
                        <button class="dropdown-item" onclick="performLogOut()"><i class="bi bi-box-arrow-right me-2"></i>Logout</button>
                    </li>
                </ul>
            </li>
        }
    </ul>
    <div class="tab-content" id="homeTab">
        <div class="tab-pane fade @(Model == "garage" ? "show active" : "")" id="garage-tab-pane" role="tabpanel" tabindex="0">
            <div class="row">
                <div id="garageContainer" class="row gy-3 align-items-stretch">
                </div>
            </div>
        </div>
        <div class="tab-pane fade @(Model == "settings" ? "show active" : "")" id="settings-tab-pane" role="tabpanel" tabindex="0">
        </div>
    </div>
</div>

<div class="modal fade" id="addVehicleModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content" id="addVehicleModalContent">
        </div>
    </div>
</div>
<script>
    loadGarage();
    bindWindowResize();
</script>