<div id="create-new-route-modal" uk-modal="bg-close: false">
    <div class="uk-modal-dialog">
        <div class="uk-modal-header">
            <h2 class="uk-modal-title">Create a new routing request</h2>
        </div>

        <div class="uk-modal-body">
            <div class="uk-margin">
                <label class="uk-form-label">Route XM8 notifications from</label>
                <div class="uk-form-controls uk-margin-left">
                    <label><input class="uk-radio" type="radio" value="any" v-model="newRouteServerRadio"> Any server</label>
                    <br>
                    <label><input class="uk-radio" type="radio" value="custom" v-model="newRouteServerRadio"> Custom</label>

                    <div class="uk-margin-small uk-margin-left" v-show="newRouteServerRadio == 'custom'">
                        <multiselect
                            v-model="newRouteServers"
                            :options="servers"
                            :multiple="true"
                            :close-on-select="true"
                            group-values="servers"
                            group-label="name"
                            :group-select="true"
                            placeholder="Type to search servers"
                            track-by="id"
                            label="name"
                            :limit="1"
                            :disabled="newRouteInputDisabled"
                        >
                            <span slot="noResult">No matches. Please adjust your search and try again</span>
                        </multiselect>
                    </div>
                </div>
            </div>

            <div class="uk-margin">
                <label class="uk-form-label">With type(s)</label>
                <div class="uk-form-controls uk-margin-left">
                    <label><input class="uk-radio" type="radio" value="any" v-model="newRouteTypesRadio" :disabled="newRouteInputDisabled"> Any</label>
                    <br>
                    <label v-tooltip="typePresets.raids.join(', ')"><input class="uk-radio" type="radio" value="raids" v-model="newRouteTypesRadio" :disabled="newRouteInputDisabled"> Base Raid</label>
                    <br>
                    <label v-tooltip="typePresets.payments.join(', ')"><input class="uk-radio" type="radio" value="payments" v-model="newRouteTypesRadio" :disabled="newRouteInputDisabled"> Base Payments</label>
                    <br>
                    <label><input class="uk-radio" type="radio" value="custom" v-model="newRouteTypesRadio"> Custom</label>

                    <div class="uk-margin-small uk-margin-left" v-show="newRouteTypesRadio == 'custom'">
                        <multiselect
                            v-model="newRouteTypes"
                            :options="types"
                            :multiple="true"
                            :close-on-select="true"
                            placeholder="Type to search types"
                            track-by="id"
                            label="name"
                            :limit="3"
                            :disabled="newRouteInputDisabled"
                            :hide-selected="true"
                        >
                            <span slot="noResult">No matches. Please adjust your search and try again</span>
                        </multiselect>
                    </div>
                </div>
            </div>

            <div class="uk-margin">
                <label class="uk-form-label">To community</label>
                <div class="uk-form-controls uk-margin-bottom">
                    <multiselect
                        v-model="newRouteCommunity"
                        :options="communities"
                        :close-on-select="true"
                        placeholder="Type to search communities"
                        track-by="id"
                        label="name"
                        :disabled="newRouteInputDisabled"
                    >
                        <span slot="noResult">No matches. Please adjust your search and try again</span>
                    </multiselect>
                </div>

                <div class="uk-form-controls uk-margin-left">
                    <label class="uk-form-label">And notify channel</label>
                    <multiselect
                        v-if="newRouteCommunity"
                        v-model="newRouteChannel"
                        :options="newRouteCommunity.channels"
                        group-values="channels"
                        group-label="category_name"
                        placeholder="Type to search channels"
                        track-by="id"
                        label="name"
                        :disabled="newRouteInputDisabled"
                    >
                        <span slot="noResult">No matches. Please adjust your search and try again</span>
                    </multiselect>

                    <multiselect
                        v-else
                        :options="[]"
                        placeholder="Please select a community first"
                        :disabled="true"
                    ></multiselect>
                </div>
            </div>
        </div>

        <div class="uk-modal-footer">
            <div uk-grid>
                <div class="uk-width-1-2">
                    <small>
                        Once this request is created, an admin on the selected community will need to accept the request from the admin dashboard before their notifications will be routed
                    </small>
                </div>
                <div class="uk-width-1-2">
                    <button class="uk-button uk-button-primary uk-width-1-1 uk-margin-small-bottom" type="button" @click="ajaxCreateRequest" :disabled="!createRequestButtonEnabled">Create Request</button>
                    <button class="uk-button uk-button-default uk-modal-close uk-width-1-1" type="button" :disabled="newRouteInputDisabled">Cancel</button>
                </div>
            </div>

        </div>
    </div>
</div>