<div class="uk-card uk-card-info">
<%= form_tag community_command_path(@community.public_id, command.command_name), method: :patch, remote: true do %>
<%# Command toggle, name and description %>
<div class="uk-card-header uk-padding-small uk-padding-remove-bottom">
<%# Enabled %>
<% if command.command_attributes["enabled"]["modifiable"] %>
<div class="uk-grid uk-grid-small uk-switch-grid" uk-grid uk-tooltip="If disabled, this command cannot be used for your community/server(s)">
<div style="padding-top: 1em !important;">
<label class="uk-switch uk-light">
<%= check_box_tag :enabled, true, command.configuration.enabled?, class: "command-enabler", id: "enabled_#{command.command_name}", data: { name: command.command_name } %>
<div class="uk-switch-slider uk-switch-on-off round"></div>
</label>
</div>
<div class="uk-width-expand">
<div class="command-syntax" style="font-size: large;">
<% if command.command_type == "admin" %>
<i class="fas fa-user-lock esm-text-color-toast-blue" uk-tooltip="Admin command"></i>
<% end %>
<span class="esm-text-color-toast-blue">
<%= command.command_usage %>
</span>
</div>
</div>
</div>
<% else %>
<div class="command-syntax" style="font-size: large;">
<% if command.command_type == "admin" %>
<i class="fas fa-user-lock esm-text-color-toast-blue" uk-tooltip="Admin command"></i>
<% end %>
<span class="esm-text-color-toast-blue">
<%= command.command_usage %>
</span>
</div>
<% end %>
<small class="esm-text-subtle"><%= command.description_as_html %></small>
</div>
<%# Command Configurations %>
<div class="uk-card-body uk-padding-small">
<div id="command-body-<%= command.command_name %>">
<%# Cooldown %>
<% if command.command_attributes["cooldown_time"]["modifiable"] %>
<div class="uk-margin-bottom">
<h4 class="uk-margin-small-bottom" uk-tooltip="The length of time a user has to wait before they can use this command again">Cooldown</h4>
<div class="uk-grid-small" uk-grid>
<div class="uk-width-1-3@m uk-width-1-2">
<%= number_field_tag :cooldown_quantity, command.configuration.cooldown_quantity, min: 2, class: "uk-input uk-form-small", placeholder: 2, id: "cooldown_quantity_#{command.command_name}" %>
</div>
<div class="uk-width-1-3@m uk-width-1-2">
<%= select_tag :cooldown_type, options_for_select(CommandConfiguration::COOLDOWN_TYPES, command.configuration.cooldown_type), class: "uk-select uk-form-small", id: "cooldown_type_#{command.command_name}" %>
</div>
</div>
</div>
<% end %>
<h4 class="uk-margin-small-bottom">Options</h4>
<%# Notify when disabled? %>
<% if command.command_attributes["enabled"]["modifiable"] %>
<div class="uk-grid uk-grid-collapse uk-switch-grid" uk-grid uk-tooltip="When this option is checked, ESM will inform the user that the command is disabled. Otherwise, ESM will "ignore" the command entirely.">
<div>
<label class="uk-switch uk-light" >
<%= check_box_tag :notify_when_disabled, true, command.configuration.notify_when_disabled?, id: "notify_when_disabled_#{command.command_name}", data: { name: command.command_name }, class: "immutable" %>
<div class="uk-switch-slider uk-switch-on-off round"></div>
</label>
</div>
<div>
<p>Notify when disabled?</p>
</div>
</div>
<% end %>
<%# Allowed in text channels? %>
<% if command.command_attributes["allowed_in_text_channels"]["modifiable"] %>
<div class="uk-grid uk-grid-collapse uk-switch-grid" uk-grid uk-tooltip="Are users allowed to use this command in your Discord server text channels?">
<div>
<label class="uk-switch uk-light" >
<%= check_box_tag :allowed_in_text_channels, true, command.configuration.allowed_in_text_channels?, id: "allowed_in_text_channels_#{command.command_name}", data: { name: command.command_name } %>
<div class="uk-switch-slider uk-switch-on-off round"></div>
</label>
</div>
<div>
<p>Allowed in Text channels?</p>
</div>
</div>
<% end %>
<%# Allowlist enabled? %>
<% if command.command_attributes["allowlist_enabled"]["modifiable"] %>
<div class="uk-grid uk-grid-collapse uk-switch-grid" uk-grid uk-tooltip="Enabling the allowlist means this command can only be used by users with one of these roles in your Discord server.">
<div>
<label class="uk-switch uk-light">
<%= check_box_tag :allowlist_enabled, true, command.configuration.allowlist_enabled?, id: "allowlist_enabled_#{command.command_name}", class: "command-allowlist-enabler", data: { name: command.command_name } %>
<div class="uk-switch-slider uk-switch-on-off round"></div>
</label>
</div>
<div>
<p>Use Allowlist?</p>
</div>
</div>
<% end %>
<%# Allowlist %>
<% if command.command_attributes["allowlist_enabled"]["modifiable"] && command.command_attributes["allowlisted_role_ids"]["modifiable"] %>
<div class="uk-margin-bottom" id="command-allowlist-<%= command.command_name %>">
<%= tag.div class: "uk-child-width-1-2@m uk-child-width-1-1 role-selector",
data: { roles: @community.roles, selected_roles: command.configuration.allowlisted_roles },
id: "role-selector-#{command.command_name}",
"uk-grid": "" do %>
<div>
<label class="uk-form-label">Available Roles</label>
<div class="uk-form-controls">
<select class="uk-select" uk-tooltip="Roles with Administrator permission automatically have access" v-model="selectedRole">
<option
v-for="role of roles"
:value="role.id"
:style="{ color: role.selected ? '' : '#' + role.color + ' !important' }"
:disabled="role.selected">
{{role.name}}
</option>
</select>
<button class="uk-button esm-button uk-margin-top uk-width-1-1" type="button" :disabled="disableAddButton" @click="addRole">Add</button>
</div>
</div>
<div>
<%= hidden_field_tag "allowlisted_role_ids[]", "", id: nil, "v-for": "role of selectedRoleIDs", ":value": "role", multiple: true %>
<label class="uk-form-label">Selected Roles</label>
<div class="uk-form-controls">
<table class="uk-table uk-table-small">
<tbody>
<tr v-for="role of selectedRoles">
<td class="uk-width-5-6" :style="{ color: '#' + role.color + ' !important' }">{{role.name}}</td>
<td class="uk-table-shrink uk-width-5-6">
<a class="fas fa-times" @click="removeRole(role)"></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<% end %>
</div>
<% end %>
</div>
</div>
<div class="uk-card-footer">
<%= submit_tag :save, class: "uk-button esm-button-confirm uk-position-small uk-position-bottom-right uk-margin-small-bottom" %>
</div>
<% end %>
</div>
<script>
toggleChildElements("#command-body-<%= command.command_name %>", <%= command.configuration.enabled? %>);
toggleChildElements("#command-allowlist-<%= command.command_name %>", <%= command.configuration.allowlist_enabled? %>);
</script>