= render "shared/modal",
  id: "add_alias_modal",
  class: "modal-lg",
  data: { \
    bs_focus: false, bs_backdrop: "static", bs_keyboard: "false",
    controller: "alias-new",
    alias_new_aliases_outlet: "[data-controller='aliases']",
  } do
    .modal-header.border-primary.bg-primary.bg-opacity-10
      h4.modal-title.text-primary.mb-0
        i.bi.bi-bookmark-plus.me-2
        | Add New Alias
      button.btn-close[type="button" data-bs-dismiss="modal" aria-label="Close"]

    .modal-body
      / Type Selection
      .mb-4
        h5.fw-medium.mb-2 What does this alias represent?

        .row.g-3
          .col-md-6
            .card.border-2.selectable-card[data-alias-new-target="communityButton"]
              .card-body.text-center.py-3
                i.bi.bi-discord.text-primary.fs-3.mb-2
                h6.mb-1.text-primary Community
                small.text-muted.mb-3.d-block A Discord server with ESM
                button.btn.btn-outline-primary.btn-sm.w-100[
                  type="button"
                  data-type="community"
                  data-action="click->alias-new#onSectionChanged"
                ] Select

          .col-md-6
            .card.border-2.selectable-card[data-alias-new-target="serverButton"]
              .card-body.text-center.py-3
                i.bi.bi-server.text-success.fs-3.mb-2
                h6.mb-1.text-success Arma Server
                small.text-muted.mb-3.d-block A specific game server
                button.btn.btn-outline-success.btn-sm.w-100[
                  type="button"
                  data-type="server"
                  data-action="click->alias-new#onSectionChanged"
                ] Select

      / Alias Rules
      .alert.alert-info.border-info.bg-info.bg-opacity-10.mb-4
        h6.text-info.mb-2
          i.bi.bi-info-circle.me-2
          | Alias Rules
        ul.small.mb-0
          li Up to 64 characters in length <em class="text-muted">(though why would you want one that long?)</em>
          li Cannot already exist as an alias of the same type
          li You can create the same alias for a community and a server, but not for two communities or two servers

      / Community Selection
      .mb-4[data-alias-new-target="communitySection"]
        = label_tag "community_id", class: "form-label h6 fw-medium"
          i.bi.bi-discord.text-primary.me-2
          | Select Community
        = select_tag "community_id",
            [],
            class: "form-select",
            data: { \
              controller: "slim-select",
              slim_select_placeholder_value: "Choose a community...",
              slim_select_allow_deselect_value: true,
              slim_select_data_value: alias_community_select_data,
              action: [ \
                slim_select_stimulus_actions("alias-new"),
                "change->alias-new#onIDChanged",
              ].join(" "),
              alias_new_target: "communityID",
            }
        small.form-text.text-muted.mt-1 Choose the Discord community this alias will represent

      / Server Selection (hidden by default)
      .mb-4.d-none[data-alias-new-target="serverSection"]
        = label_tag "server_id", class: "form-label h6 fw-medium"
          i.bi.bi-server.text-success.me-2
          | Select Server
        = select_tag "server_id",
            [],
            class: "form-select",
            data: { \
              controller: "slim-select",
              slim_select_placeholder_value: "Choose a server...",
              slim_select_allow_deselect_value: true,
              slim_select_data_value: alias_server_select_data,
              action: [ \
                slim_select_stimulus_actions("alias-new"),
                "change->alias-new#onIDChanged",
              ].join(" "),
              alias_new_target: "serverID",
            }
        small.form-text.text-muted.mt-1 Choose the game server this alias will represent

      / Alias Name Input
      .mb-4
        = label_tag "value", class: "form-label h5 fw-medium"
          span.text-danger.me-1 *
          | Alias Name
        .input-group.input-group-lg
          span.input-group-text.bg-primary.text-white
            i.bi.bi-bookmark
          = text_field_tag "value", "",
              class: "form-control",
              placeholder: "main",
              maxlength: 64,
              data: {alias_new_target: "value", action: "input->alias-new#onValueInput"}
        .d-flex.justify-content-between.mt-2
          small.form-text.text-muted Keep it short and memorable!
          small.form-text.text-muted
            span[data-alias-new-target="valueCount"]
              | 0
            | /64 characters

      / Preview Card
      .card.bg-secondary.bg-opacity-10.border-secondary
        .card-header.py-2
          h6.mb-0.text-light
            i.bi.bi-eye.me-2
            | Command Preview
        / Community preview
        .card-body.py-3[data-alias-new-target="communityPreviewSection"]
          .mb-3
            small.text-muted.mb-2.d-block Instead of typing:
            .bg-dark.rounded.p-3
              span.command
                span
                  |> /community servers
                span.arg.identifier
                  | for
                span.text-secondary
                  | :
                span.arg.identifier[data-alias-new-target="communityPreviewBefore"]
                  | &lt;community&gt;
          .mb-0
            small.text-muted.mb-2.d-block You'll type:
            .bg-dark.rounded.p-3
              span.command
                span
                  |> /community servers
                span.arg.identifier
                  | for
                span.text-secondary
                  | :
                span.arg.identifier.d-none[data-alias-new-target="communityPreviewAfter"]

        / Server preview
        .card-body.py-3.d-none[data-alias-new-target="serverPreviewSection"]
          .mb-3
            small.text-muted.mb-2.d-block Instead of typing:
            .bg-dark.rounded.p-3
              span.command
                span
                  |> /server reward
                span.arg.identifier
                  | on
                span.text-secondary
                  | :
                span.arg.identifier[data-alias-new-target="serverPreviewBefore"]
                  | &lt;server&gt;
          .mb-0
            small.text-muted.mb-2.d-block You'll type:
            .bg-dark.rounded.p-3
              span.command
                span
                  |> /server reward
                span.arg.identifier
                  | on
                span.text-secondary
                  | :
                span.arg.identifier.d-none[data-alias-new-target="serverPreviewAfter"]

    .modal-footer.border-top
      / Mobile
      .d-block.d-lg-none.w-100
        .row.g-2.mb-3
          .col-12
            small.text-muted.text-center.d-block
              i.bi.bi-info-circle.text-info.me-1
              | You can edit or delete aliases later
        .row.g-2
          .col-6
            button.btn.btn-outline-secondary.w-100[type="button" data-bs-dismiss="modal"]
              | Cancel
          .col-6
            = button_tag type: "button",
                class: "btn btn-success w-100",
                data: { action: "click->alias-new#create" } do
              i.bi.bi-plus-circle.me-2
              | Add Alias

      / Desktop
      .d-none.d-lg-flex.align-items-center.justify-content-between.w-100
        small.text-muted
          i.bi.bi-info-circle.text-info.me-1
          | You can edit or delete aliases later
        .d-flex.gap-2
          button.btn.btn-outline-secondary[type="button" data-bs-dismiss="modal"]
            | Cancel
          = button_tag type: "button",
              class: "btn btn-success ms-2",
              data: { action: "click->alias-new#create" } do
            i.bi.bi-plus-circle.me-2
            | Add Alias