@page
@model ZpcBulletinBoard.Pages.Boards.IndexModel

@{
    ViewData["Title"] = "Oglasne deske - Pregled";
    Layout = "~/Pages/Shared/_Layout.cshtml";
}

@section Styles {
    <link rel="stylesheet" href="~/vendor/libs/bootstrap-material-datetimepicker/bootstrap-material-datetimepicker.css">
    
    <style type="text/css">
        .table > tbody > tr > td:nth-child(2),
        .table > thead > tr > th:nth-child(2),
        .table > tbody > tr > td:nth-child(3),
        .table > thead > tr > th:nth-child(3) {
            width: 100px
        }
    </style>
}

<h4 class="d-flex justify-content-between align-items-center w-100 font-weight-bold py-1 mb-4">
    <span>
        <span class="text-muted font-weight-light">
            <i>Oglasne deske</i>
            /</span> Pregled
    </span>
</h4>

<div class="card">
    <h6 class="card-header">
        Seznam oglasnih desk
    </h6>
    <table class="table card-table">
        <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.Boards[0].Name)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.Boards[0].Ratio)
            </th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        @foreach (var item in Model.Boards)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.Ratio)
                </td>
                <td>
                    <a class="btn btn-xs icon-btn btn-outline-secondary borderless" asp-page="AddEdit" asp-route-guid="@item.Guid" data-toggle="tooltip" data-placement="top" title="Urejanje" data-state="secondary"><i class="fas fa-pencil-alt"></i></a>
                </td>
            </tr>
        }
        </tbody>
    </table>
    <div class="card-footer py-3 text-right">
        <a asp-page="AddEdit" class="btn btn-primary">Dodaj novo</a>
    </div>
</div>

@section Scripts {
}