@model ProjectCollaboratorsViewModel
@{
    ViewData["Title"] = "Collaborators";
}

<nav class="breadcrumb-trail" aria-label="Breadcrumb">
    <a asp-controller="Projects" asp-action="Index">Projects</a>
    <a asp-controller="Projects" asp-action="Details" asp-route-id="@Model.Project.ProjectID">@Model.Project.ProjectName</a>
    <span>Collaborators</span>
</nav>

<div class="page-heading">
    <div>
        <p class="eyebrow">Project access</p>
        <h1>Collaborators</h1>
    </div>
    <div class="button-row">
        <a class="btn btn-outline-secondary" asp-controller="Projects" asp-action="Details" asp-route-id="@Model.Project.ProjectID">Back to project</a>
    </div>
</div>

@if (TempData["CollaborationMessage"] is string collaborationMessage)
{
    <div class="alert alert-success">@collaborationMessage</div>
}

@if (TempData["CollaborationError"] is string collaborationError)
{
    <div class="alert alert-warning">@collaborationError</div>
}

<section class="edit-panel">
    <form asp-action="Add" method="post" class="row g-3 align-items-end">
        <input type="hidden" name="ProjectID" value="@Model.Project.ProjectID" />
        <div class="col-md-8">
            <label class="form-label" for="EmailAddress">Collaborator email</label>
            <input class="form-control" id="EmailAddress" name="EmailAddress" value="@Model.Invite.EmailAddress" autocomplete="email" />
        </div>
        <div class="col-md-4">
            <button class="btn btn-primary" type="submit">Add collaborator</button>
        </div>
    </form>
</section>

<section class="list-section">
    <h2>Current collaborators</h2>
    @if (!Model.Collaborators.Any())
    {
        <p class="muted">No collaborators have access to this project yet.</p>
    }
    else
    {
        <div class="table-responsive">
            <table class="table align-middle">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Added</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var collaborator in Model.Collaborators)
                    {
                        <tr>
                            <td>@collaborator.DisplayName</td>
                            <td>@collaborator.Email</td>
                            <td>@collaborator.InvitedDateUTC?.ToString("dd MMM yyyy")</td>
                            <td class="text-end">
                                <form asp-action="Remove" method="post" class="archive-button-form" data-confirm-message="Remove collaborator access for this project?">
                                    <input type="hidden" name="projectId" value="@Model.Project.ProjectID" />
                                    <input type="hidden" name="userId" value="@collaborator.UserID" />
                                    <button class="btn btn-outline-danger btn-sm" type="submit">Remove</button>
                                </form>
                            </td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    }
</section>

@if (Model.PendingInvitations.Any())
{
    <section class="list-section">
        <h2>Pending invitations</h2>
        <div class="table-responsive">
            <table class="table align-middle">
                <thead>
                    <tr>
                        <th>Email</th>
                        <th>Invited</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var invitation in Model.PendingInvitations)
                    {
                        <tr>
                            <td>@invitation.EmailAddress</td>
                            <td>@invitation.InvitedDateUTC.ToString("dd MMM yyyy")</td>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
    </section>
}