<% layout('layouts/boilerplate') %>
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb small">
            <li class="breadcrumb-item"><a href="/admin/hosts" class="link-dark">Manage Event Hosts</a></li>
            <li class="breadcrumb-item active" aria-current="page">Create Event Host</li>
        </ol>
    </nav>
    <div class="card shadow  py-3 px-3 mb-3">
        <div class="card-header bg-white mb-3">
            <h4>Create Event Host</h4>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col">
                    <form action="/admin/hosts/new" method="POST">
                        <div class="row mb-3">
                            <div class="col">
                                <label for="hostName">Name</label>
                                <input class="form-control" type="text" id="hostName" required name="name" autocomplete="off">
                            </div>
                            <div class="col">
                                <label for="eventSystem">Event System</label>
                                <select class="form-select" name="eventSystem" required id="eventSystem">
                                <% for (eventSystem of eventSystems.sort((a,b) => a.name.localeCompare(b.name))){ %>
                                    <% if (currentUser.eventSystems.filter(a => a._id.equals(eventSystem._id)).length > 0 || adminGroups.includes(currentUser.role)) { %>
                                    <option value="<%= eventSystem._id %>"><%= eventSystem.name %></option>
                                <% }} %>
                            </select>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="hostImg">Image</label>
                            <input type="text" class="form-control" id="hostImg" name="img">
                        </div>
                        <div title="Contact details for event queries" class="mb-3">
                            <label for="hostEmailAddress">Contact E-mail Address</label>
                            <input type="text" id="hostEmailAddress" name="contactAddress" class="form-control">
                        </div>
                        <div class="mb-3">
                            <label for="hostPaypalAddress">Paypal E-mail Address</label>
                            <input type="text" id="hostPaypalAddress" name="paypalAddress" class="form-control">
                        </div>
                        <div class="mb-3">
                            <button class="btn btn-success">Create</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>