@(teams: List[EditorialSupportTeam], fronts: EditorialSupportTeam)(implicit request: RequestHeader)
@import helper._
@renderTeam(team: EditorialSupportTeam) = {
    <ul class="support-list">
    @for(staff <- team.staff) {
        <form class="support-list-form" method="POST">
            @CSRF.formField
            <li class="support-list-item">
                <input type="hidden" name="id" value="@staff.id">
                <input type="hidden" name="team" value="@staff.team">
                <input type="hidden" name="name" value="@staff.name">
                <input type="hidden" name="action" value="update" />
                <p class="support-staff-label support-staff-row"><b>@staff.name</b></p>

                <div class="support-staff-row">
                    <label class="support-staff-label">Active?</label>
                    @if(staff.active) {
                        <input name="active" type="checkbox" checked onchange="this.form.submit()" />
                    } else {
                        <input name="active" type="checkbox" onchange="this.form.submit()" />
                    }
                </div>

                <div class="support-staff-row">
                    <label class="support-staff-label">Description</label>
                    <input name="description" type="text" value="@staff.description" onchange="this.form.submit()" />
                </div>
            </li>
        </form>
    }
    </ul>
}

@renderFronts(team: EditorialSupportTeam) = {
    <ul class="support-list">
    @for(staff <- team.staff) {
        <form class="support-list-form" method="POST">
            @CSRF.formField
            <li class="support-list-item">
                <input type="hidden" name="id" value="@staff.id">
                <input type="hidden" name="team" value="@staff.team">
                <input type="hidden" name="action" value="update" />
                <input type="hidden" name="active" value="on">
                <p class="support-staff-label support-staff-row"><b>@staff.team</b></p>

                <div class="support-staff-row">
                    <label class="support-staff-label">Name</label>
                    <input name="name" type="text" value="@staff.name" onchange="this.form.submit()" />
                </div>
            </li>
        </form>
    }
    </ul>
}

@renderModifyTeam(teamName: String) = {
    <ul class="support-list">
        <li class="support-list-item">
            <form method="POST">
                @CSRF.formField
                <status>Add team member</status>
                <input type="hidden" name="action" value="add_team_member" />
                <input type="hidden" name="team" value="@teamName" />
                <input type="text" class="support-admin-text-input" name="name" required />
                <div class="support-admin-button-container">
                    <input type="submit" class="btn btn-sm btn-info" value="add" />
                </div>
            </form>
        </li>
        <li class="support-list-item">
            <form method="POST">
                @CSRF.formField
                <status>Delete team member</status>
                <input type="hidden" name="action" value="delete" />
                <input type="hidden" name="team" value="@teamName" />
                <input type="text" class="support-admin-text-input" name="name" required />
                <div class="support-admin-button-container">
                    <input type="submit" class="btn btn-sm btn-danger" value="delete" />
                </div>
            </form>
        </li>
    </ul>
}

@renderAddFrontsEditor() = {
    <form method="POST">
        @CSRF.formField
        <ul class="support-list">
            <li class="support-list-item">
                <input type="hidden" name="action" value="add_front" />
                <div class="support-staff-row">
                    <label class="support-staff-label">Front</label>
                    <input type="text" class="support-admin-text-input" name="team" required />
                </div>
                <div class="support-staff-row">
                    <label class="support-staff-label">User</label>
                    <input type="text" class="support-admin-text-input" name="name" required />
                </div>
                <div class="support-admin-button-container">
                    <input type="submit" class="btn btn-sm btn-info" value="add" />
                </div>
            </li>
        </ul>
    </form>
}

@layout("Support") {
    <div class="admin">

        <div class="starter-template">
            @*<p class="lead">*@
            <p>Note: this will display on all Composer documents. Don't forget to untick yourself so that colleagues aren't trying to contact an empty chair.</p>
        </div>

        <div>
            <div class="col-lg-12">
                @for(team <- teams) {
                    <h2>@team.name team</h2>
                    <div class="support-list-wrapper">
                        @renderTeam(team)
                        @renderModifyTeam(team.name)
                    </div>
                }
                <h2>Fronts team</h2>
                <div class="support-list-wrapper">
                    @renderFronts(fronts)
                    <status>Add new front</status>
                    @renderAddFrontsEditor()
                </div>
            </div>
        </div>
    </div>
}