@page
@model EnotaryoPH.Web.Pages.Notary.Dashboard.DashboardModel
@{
}

@section Head {
    <link href="~/lib/fontawesome-free-6.7.1-web/css/all.min.css" rel="stylesheet" />
}

<section class="my-5">
    <div class="container">
        <div class="row">
            <div class="col-2 col-sm-1 col-md-3 g-0">
                <div class="sidemenu">
                    <div class="align-items-center sidemenu__menuitem"><a class="d-flex flex-grow-1 justify-content-center align-items-center justify-content-md-start p-1 text-decoration-none" href="#available-transactions"><i class="far fa-check-circle fs-4 text-success sidemenu__menuitem__icon" style="padding: 5px;"></i><span class="d-none d-md-inline-block ms-1 sidemenu__menuitem__text">Available</span></a></div>
                    <div class="align-items-center sidemenu__menuitem"><a class="d-flex flex-grow-1 justify-content-center align-items-center justify-content-md-start p-1 text-decoration-none" href="#incomplete-docs"><i class="far fa-clock fs-4 text-warning sidemenu__menuitem__icon" style="padding: 5px;"></i><span class="d-none d-md-inline-block ms-1 sidemenu__menuitem__text">My Jobs</span></a></div>
                    <div class="align-items-center sidemenu__menuitem"><a class="d-flex flex-grow-1 justify-content-center align-items-center justify-content-md-start p-1 text-decoration-none" href="#identification-docs"><i class="far fa-address-card fs-4 text-dark sidemenu__menuitem__icon" style="padding: 5px;"></i><span class="d-none d-md-inline-block ms-1 sidemenu__menuitem__text">Identification Docs</span></a></div>
                </div>
            </div>
            <div class="col g-0 mx-2">
                <div id="available-transactions" class="row g-0 mb-5">
                    <div class="col">
                        <h3>Available Transactions</h3>
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Type</th>
                                        <th>Date</th>
                                        <th>Status</th>
                                        <th>Link</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach (var transaction in Model.AvailableItems)
                                    {
                                        <tr>
                                            <td>@transaction.Type</td>
                                            <td>@transaction.Date.ToString("g")</td>
                                            <td>@transaction.Status</td>
                                            <td><a href="@transaction.Link">Link</a></td>
                                        </tr>
                                    }
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div id="my-transactions" class="row g-0 mb-5">
                    <div class="col">
                        <h3>My Jobs</h3>
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>Type</th>
                                        <th>Date</th>
                                        <td>Status</td>
                                        <th>Link</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach (var transaction in Model.MyItems)
                                    {
                                        <tr>
                                            <td>@transaction.Type</td>
                                            <td>@transaction.Date.ToShortDateString()</td>
                                            <td>@transaction.Status</td>
                                            <td><a href="@transaction.Link">Link</a></td>
                                        </tr>
                                    }
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>