= render "shared/modal", id: "add_mod_modal", class: "modal-lg" do
  .modal-header.border-primary.bg-primary.bg-opacity-10
    h4.modal-title.text-primary.mb-0
      i.bi.bi-puzzle.text-info.me-2
      | Add Server Mod
    button.btn-close[type="button" data-bs-dismiss="modal" aria-label="Close"]

  .modal-body
    p.text-muted.small.mb-4
      | Help your players prepare the right modset by listing the mods your server uses.

    .row.g-3.mb-4
      .col-8
        = label_tag "add_mod_name", class: "form-label fw-medium" do
          span.text-danger *
          | Mod Name
        = text_field_tag "add_mod_name", nil,
            name: nil,
            class: "form-control",
            placeholder: "@Exile"
      .col-4
        = label_tag "add_mod_version", "Version", class: "form-label fw-medium"
        = text_field_tag "add_mod_version", nil,
            name: nil,
            class: "form-control",
            placeholder: "1.0.4"

    .mb-4
      = label_tag "add_mod_link", "Download Link", class: "form-label fw-medium"
      = url_field_tag "add_mod_link", nil,
          name: nil,
          class: "form-control",
          placeholder: "https://steamcommunity.com/workshop"

    .mb-0
      .form-check.form-switch
        = check_box_tag "add_mod_required", "1", false, class: "form-check-input", name: nil
        = label_tag "add_mod_required", class: "form-check-label fw-medium" do
          | Required Mod
          span.badge.bg-warning.text-dark.ms-2 Important
      small.form-text.text-muted.mt-1 Show players which mods they need to join

  .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 modify mod details later if needed
      .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->server-mods#create" } do
            i.bi.bi-plus-circle.me-2
            | Add Mod

    / Desktop
    .d-none.d-lg-flex.justify-content-between.align-items-center.w-100
      small.text-muted
        i.bi.bi-info-circle.text-info.me-1
        | You can modify mod details later if needed
      .d-flex.gap-2
        button.btn.btn-outline-secondary[type="button" data-bs-dismiss="modal"]
          | Cancel
        = button_tag type: "button",
            class: "btn btn-success",
            data: { action: "click->server-mods#create" } do
          i.bi.bi-plus-circle.me-2
          | Add Mod