economy/Views/FIFA/Index.cshtml

@model economy.Models.View<economy.Models.FIFA.Request, economy.Models.FIFA.Response>

@{
    ViewData["Title"] = "FIFA 순위";
}

<div class="container">
    <h3>FIFA 순위</h3>

    <div class="row g-2">
        <div class="col-auto col-form-label">
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="gender" id="gender_1" value="1" @(Model.Request.Gender == 1 ? "checked" : "") form="fSearch" />
                <label class="form-check-label" for="gender_1">남자<label>
            </div>
            <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="gender" id="gender_2" value="2" @(Model.Request.Gender == 2 ? "checked" : "") form="fSearch" />
                <label class="form-check-label" for="gender_2">여자<label>
            </div>
        </div>
    </div>

    <br/>

    <ul class="nav nav-tabs">
        <li class="nav-item">
            <a asp-controller="FIFA" asp-action="Index" asp-route-type="" asp-route-gender="@Model.Request.Gender" asp-route-perPage="@Model.Request.NumOfRows" class="nav-link @(Model.Request.Type == economy.Models.FIFA.Request.Types.ALL || Model.Request.Type == null ? "active" : "")">ALL</a>
        </li>
        <li class="nav-item">
            <a asp-controller="FIFA" asp-action="Index" asp-route-type="@economy.Models.FIFA.Request.Types.AFC" asp-route-gender="@Model.Request.Gender"  asp-route-perPage="@Model.Request.NumOfRows" class="nav-link @(Model.Request.Type == economy.Models.FIFA.Request.Types.AFC ? "active" : "")">AFC</a>
        </li>
        <li class="nav-item">
            <a asp-controller="FIFA" asp-action="Index" asp-route-type="@economy.Models.FIFA.Request.Types.CAF" asp-route-gender="@Model.Request.Gender" asp-route-perPage="@Model.Request.NumOfRows"  class="nav-link @(Model.Request.Type == economy.Models.FIFA.Request.Types.CAF ? "active" : "")">CAF</a>
        </li>
        <li class="nav-item">
            <a asp-controller="FIFA" asp-action="Index" asp-route-type="@economy.Models.FIFA.Request.Types.CONCACAF" asp-route-gender="@Model.Request.Gender" asp-route-perPage="@Model.Request.NumOfRows"  class="nav-link @(Model.Request.Type == economy.Models.FIFA.Request.Types.CONCACAF ? "active" : "")">CONCACAF</a>
        </li>
        <li class="nav-item">
            <a asp-controller="FIFA" asp-action="Index" asp-route-type="@economy.Models.FIFA.Request.Types.CONMEBOL" asp-route-gender="@Model.Request.Gender" asp-route-perPage="@Model.Request.NumOfRows"  class="nav-link @(Model.Request.Type == economy.Models.FIFA.Request.Types.CONMEBOL ? "active" : "")">CONMEBOL</a>
        </li>
        <li class="nav-item">
            <a asp-controller="FIFA" asp-action="Index" asp-route-type="@economy.Models.FIFA.Request.Types.OFC" asp-route-gender="@Model.Request.Gender"  asp-route-perPage="@Model.Request.NumOfRows" class="nav-link @(Model.Request.Type == economy.Models.FIFA.Request.Types.OFC ? "active" : "")">OFC</a>
        </li>
        <li class="nav-item">
            <a asp-controller="FIFA" asp-action="Index" asp-route-type="@economy.Models.FIFA.Request.Types.UEFA" asp-route-gender="@Model.Request.Gender"  asp-route-perPage="@Model.Request.NumOfRows" class="nav-link @(Model.Request.Type == economy.Models.FIFA.Request.Types.UEFA ? "active" : "")">UEFA</a>
        </li>
    </ul>

    <br/>
    
    <div id="fifaRanks" class="table-responsive">
        <table class="table table-hover table-bordered">
            <caption class="caption-top">
                <div class="row mb-1">
                    <div class="col align-self-center">
                        총 국가 : @Model.Response.Results.Count()
                    </div>
                    <div class="col-auto text-end">
                        <select name="perPage" id="perPage" class="form-select" asp-for="SelectedListPerPage" asp-items="Model.FIFAListPerPage" form="fSearch"></select>
                    </div>
                </div>
            </caption>
            <thead>
                <tr>
                    <th>순위</th>
                    <th>국가</th>
                    <th>전적</th>
                    <th>국명</th>
                    <th>총점</th>
                    <th>이전 순위</th>
                    <th>변동</th>
                </tr>
            </thead>
            <tbody>
                @if (@Model?.Response?.Results is not null && @Model.Response.Results.Count() > 0)
                {
                    @foreach (var row in @Model.Response.Results)
                    {
                    var diff = Math.Abs((row.Rank ?? 0) - (row.PrevRank ?? 0));
                    <tr>
                        <td>@row.Rank</td>
                        <td>
                            <img src="@row.FlagSrc" alt="@row.IdCountry" class="img-fluid"/>
                        </td>
                        <td>@row.Matches</td>
                        <td>@row.TeamName[0].Description</td>
                        <td>@row.TotalPoints</td>
                        <td>@row.PrevRank</td>
                        <td>
                            @if (diff > 0)
                            {
                                <i class="bi bi-caret-up-fill text-danger"></i>
                            }
                            else
                            {
                                <i class="bi bi-caret-down-fill text-primary"></i>
                            }
                            @diff
                        </td>
                    </tr>
                    }
                } else {
                <tr>
                    <td colspan="7">
                        No data.
                    </td>
                </tr>
                }
            </tbody>
        </table>
    </div>

    <form id="fSearch" method="get" accept-charset="UTF-8" rel="search" autocomplete="off" asp-controller="FIFA" asp-action="Index">
        <input type="hidden" name="type" value="@Model.Request.Type" />
    </form>

</div>

@section Scripts {
    <script src="~/js/fifa.js" asp-append-version="true"></script>
}
@section Styles {
    <link href="~/css/style.css" rel="stylesheet" asp-append-version="true" />
}