<div uk-grid>
    <div class="uk-width-4-5">
        <h4>Pending routing request for <span :style="{ color: request.color }" v-tooltip="request.channel.id">{{ request.channel.name }}</span></h4>
        <div uk-grid class="uk-child-width-1-3">
            <div>
                <div class="uk-margin">
                    <label class="uk-form-label">The following user</label>
                    <br>
                    <img :data-src="request.user.avatar" width="32" height="32" alt="" class="uk-border-circle" uk-img></img>
                    <span :style="{ color: request.color }">{{ request.user.name }}</span>
                </div>
            </div>

            <div>
                <div class="uk-margin">
                    <label class="uk-form-label">wants to route messages from</label>
                    <br>
                    <span class="esm-text-color-white">{{ request.server.id || "Any server" }}</span>
                </div>
            </div>

            <div>
                <label class="uk-form-label">with the following types</label>
                <br>

                <div class="uk-inline uk-width-1-1">
                    <input class="uk-checkbox"
                        type="checkbox"
                        @click="toggleRequestType(request, undefined, $event)"
                        :ref="`request-${request.user.id}-${request.server.id}-${request.channel.id}-select-all`">
                    </input>

                    <span class="esm-text-color-white uk-margin-small-left">Select all {{ _.size(request.types) }} types</span>

                    <i class="fas clickable uk-position-right"
                        :class="{ 'fa-chevron-down': !request.types_expanded, 'fa-chevron-up': request.types_expanded }"
                        @click="request.types_expanded = !request.types_expanded"
                        v-tooltip="'View requested types'"
                        :style="{ color: request.color, 'margin-top': '0.35em' }">
                    </i>
                </div>


                <div class="uk-margin-small-top" v-show="request.types_expanded">
                    <hr :style="{ 'border-color': request.color }" class="uk-margin-small-bottom">

                    <div class="uk-margin-left">
                        <div class="uk-margin-small-bottom" v-for="type of request.types" :key="`request-${type.id}`">
                            <input class="uk-checkbox" type="checkbox" :checked="type.selected" @click="toggleRequestType(request, type, $event)">
                            <small class="esm-text-color-white uk-margin-small-left">{{ type.name }}</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="uk-width-1-5">
        <%= button_tag :accept, class: "uk-button esm-button-confirm uk-width-1-1 uk-margin-bottom", "@click": "ajaxUpdateRequest(request, 'accept')", ":disabled": "!_.some(request.types, 'selected') || pendingRequestsInputDisabled" %>
        <%= button_tag :decline, class: "uk-button esm-button-danger uk-width-1-1", "@click": "ajaxUpdateRequest(request, 'decline')", ":disabled": "!_.some(request.types, 'selected') || pendingRequestsInputDisabled" %>
    </div>
</div>