{{> header }}
<div class="container-fluid">
    <div class="row">
        <div class="wrapper">
            {{> sidebar }}
            <div id="content">
                {{> searchbar}}
                <hr>
                <h1>Einsatz anlegen</h1>

                <div class="col">
                    <form id="create_event_form">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="form-group row">
                                    <label for="name" class="col-sm-3 col-form-label">Name*</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="name" required>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Beginn*</label>
                                    <div class="col-sm-9">
                                        <div class="row m-0">
                                            <input type="date" class="form-control col-9" id="start_date" required>
                                            <input type="time" class="form-control col-3" id="start_time" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-sm-3 col-form-label">Ende*</label>
                                    <div class="col-sm-9">
                                        <div class="row m-0">
                                            <input type="date" class="form-control col-9" id="end_date" required>
                                            <input type="time" class="form-control col-3" id="end_time" required>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="site" class="col-sm-3 col-form-label">Veranstaltungsort</label>
                                    <div class="col-sm-9">
                                        <textarea rows="4" class="form-control" id="site"></textarea>
                                    </div>
                                </div>
                                <hr>
                                <h3>Ansprechpartner vor Ort</h3>
                                <div class="form-group row">
                                    <label for="contact_on_site_name" class="col-sm-3 col-form-label">Name</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="contact_on_site_name">
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="contact_on_site_phone" class="col-sm-3 col-form-label">Telefonnummer</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="contact_on_site_phone">
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-6">
                                <div class="form-group row">
                                    <label for="etype" class="col-sm-3 col-form-label">Einsatzart</label>
                                    <div class="col-sm-9">
                                        <select class="form-control" id="etype">
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="related_group" class="col-sm-3 col-form-label">Gruppe</label>
                                    <div class="col-sm-9">
                                        <select class="form-control" id="related_group">
                                        </select>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="create-event-member-searchbar" class="col-sm-3 col-form-label">Einsatzverantwortlich</label>
                                    <div class="col-sm-9">
                                        <div id="create-event-member-search">
                                            <div class="input-group">
                                                <input type="text" class="form-control" id="add_event_search-searchbar" data-search-type="member">
                                                <span class="input-group-append">
                                                    <span class="btn btn-outline-secondary" type="button">
                                                        <svg width="16" height="16" fill="currentColor">
                                                            <use xlink:href="/img/bootstrap-icons.svg#search"></use>
                                                        </svg>
                                                    </span>
                                                </span>
                                            </div>
                                            <div class="add_event_search-search-result-overlay" style="display: none;">
                                                <ul class="add_event_search-search-result-overlay-list"></ul>
                                            </div>
                                        </div>
                                        <div class="input-group" id="member_responsible_input_group" style="display: none">
                                            <input type="text" disabled id="member_responsible" class="form-control">
                                            <span class="input-group-append">
                                                <span class="btn btn-outline-secondary" id="member_responsible_remove" type="button">
                                                    <svg width="16" height="16" fill="currentColor">
                                                        <use xlink:href="/img/bootstrap-icons.svg#pencil-square"></use>
                                                    </svg>
                                                </span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label for="add_event_organiser_search-searchbar" class="col-sm-3 col-form-label">Veranstalter</label>
                                    <div class="col-sm-9">
                                        <div id="create-event-organiser-search">
                                            <div class="input-group">
                                                <input type="text" class="form-control" id="add_event_organiser_search-searchbar" data-search-type="organiser">
                                                <span class="input-group-append">
                                                                                    <span class="btn btn-outline-secondary" type="button">
                                                                                        <svg width="16" height="16" fill="currentColor">
                                                                                            <use xlink:href="/img/bootstrap-icons.svg#search"></use>
                                                                                        </svg>
                                                                                    </span>
                                                </span>
                                            </div>
                                            <div class="add_event_organiser_search-search-result-overlay" style="display: none;">
                                                <ul class="add_event_organiser_search-search-result-overlay-list"></ul>
                                            </div>
                                        </div>
                                        <div class="input-group" id="organiser_input_group" style="display: none">
                                            <input type="text" disabled id="organiser" class="form-control">
                                            <span class="input-group-append">
                                                                                <span class="btn btn-outline-secondary" id="organiser_remove" type="button">
                                                                                    <svg width="16" height="16" fill="currentColor">
                                                                                        <use xlink:href="/img/bootstrap-icons.svg#pencil-square"></use>
                                                                                    </svg>
                                                                                </span>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">
                                                                    <label for="site" class="col-sm-3 col-form-label">Notiz (öffentlich)</label>
                                                                    <div class="col-sm-9">
                                                                        <textarea rows="4" class="form-control" id="other"></textarea>
                                                                    </div>
                                                                </div>
                                <div class="form-group row">
                                                                    <label for="site" class="col-sm-3 col-form-label">Notiz (intern)</label>
                                                                    <div class="col-sm-9">
                                                                        <textarea rows="4" class="form-control" id="other_intern"></textarea>
                                                                    </div>
                                                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <p>* Pflichtfelder</p>
                            <div class="col text-center">
                                <button type="button" class="btn btn-success" id="create_event_btn">Veranstaltung anlegen</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{{> footer }}