<h2 class="uk-margin-remove-bottom uk-heading-bullet">Server Info</h2>

<div class="uk-margin">
  <div class="uk-margin-bottom">
    <h3 class="uk-margin-remove-bottom"><sup class="esm-text-color-toast-red">*</sup>Server ID</h3>
    <p class="uk-margin-remove-top">
      A unique identifier used in all ESM commands for this server.
      <br>
      <i class="uk-text-small uk-text-muted uk-display-block">
        Keep it short and memorable - players will type this frequently! (Example: 'exile_1' or 'tanoa')
      </i>
    </p>
  </div>
  <div class="uk-form-controls uk-grid-collapse" uk-grid>
    <div class="uk-input uk-width-auto" style="padding-left: 10px; padding-right: 0;">
      <%= current_community.community_id %>_
      <br>
      <small class="esm-text-color-toast-red uk-position-absolute" v-html="errors.server_id.join('<br>')" style="margin-left: -10px;"></small>
    </div>
    <div class="uk-width-expand">
      <%= f.text_field :server_id, class: "uk-input uk-padding-remove-left", style: "padding-bottom: 2.5px;", placeholder: "altis", "uk-tooltip": "title: Combined with your communityID, this server ID will be what your players use to access this server. It cannot contain spaces or symbols;", ":disabled": "processing", "v-model.trim": "server.server_id", "@input": "checkServerID" %>
    </div>
  </div>
</div>

<div class="uk-margin-medium">
  <div class="uk-margin-bottom">
    <h3 class="uk-margin-remove-bottom"><sup class="esm-text-color-toast-red">*</sup>Server IP and Port</h3>
    <p class="uk-margin-remove-top">
      The connection details for your server. This information is displayed to players to help them connect to your server, especially useful for bookmarking or sharing with friends.
    </p>
  </div>
  <div class="uk-form-controls">
    <%= f.text_field :server_ip, class: "uk-input uk-width-medium@m uk-width-1-3", placeholder: "122.122.122.122", "v-model.trim": "server.server_ip", ":disabled": "processing", "@input": "checkServerAddress" %>
    :
    <%= f.text_field :server_port, class: "uk-input uk-width-small@m uk-width-1-3", placeholder: 2302, "v-model.trim": "server.server_port", ":disabled": "processing", "@input": "checkServerAddress" %>
    <br>
    <small class="esm-text-color-toast-red uk-position-absolute" v-html="errors.server_address.join('<br>')"></small>
  </div>
</div>
<div class="uk-margin-medium">
  <div class="uk-margin-bottom">
    <h3 class="uk-margin-remove-bottom">Server Mods</h3>
    <p class="uk-margin-remove-top">
      List the mods running on your server. This helps players prepare the correct modset before joining and showcases your server's unique features.
    </p>
  </div>
  <div class="uk-form-controls">
    <%= f.hidden_field :server_mods, ":value": "JSON.stringify(mods)" %>
    <table class="uk-table uk-table-small">
      <tbody>
        <tr>
          <tr v-for="(mod) of mods">
            <td class="uk-width-4-5">{{mod.mod_name}} {{ mod.mod_version }}</td>
            <td class="uk-table-shrink uk-width-1-5 uk-padding-remove-right">
              <a class="fas fa-pencil-alt" @click="editMod(mod.mod_name)" v-show="!processing"></a>
              <a class="fas fa-times" @click="removeMod(mod.mod_name)" v-show="!processing"></a>
            </td>
          </tr>
        </tr>
      </tbody>
    </table>
    <button class="uk-button esm-button" type="button" uk-toggle="target: #add-mod" :disabled="processing" @click="resetMod">Add Mod</button>
  </div>
</div>
<div class="uk-margin-medium">
  <div class="uk-margin-bottom">
    <h3 class="uk-margin-remove-bottom">
      Rewards
    </h3>
    <p class="uk-margin-remove-top">
      Configure the items and currency given to players when they use the <%= command_usage(:reward, only: []) %>  command. The command cooldown can be adjusted in <code>Command Configuration</code> settings.
    </p>
  </div>
  <div class="uk-form-controls">
    <%= f.fields_for ServerReward.new do |reward_f| %>
      <div class="uk-child-width-1-3" uk-grid>
        <div>
          <label class="uk-form-label">Poptabs (Player)</label>
          <div class="uk-form-controls">
            <%= reward_f.number_field :player_poptabs, class: "uk-input", value: "0", min: "0", "v-model.number": "reward.player_poptabs" %>
          </div>
        </div>
        <div>
          <label class="uk-form-label">Poptabs (Locker)</label>
          <div class="uk-form-controls">
            <%= reward_f.number_field :locker_poptabs, class: "uk-input", value: "0", min: "0", "v-model.number": "reward.locker_poptabs" %>
          </div>
        </div>
        <div>
          <label class="uk-form-label">Respect</label>
          <div class="uk-form-controls">
            <%= reward_f.number_field :respect, class: "uk-input", value: "0", min: "0", "v-model.number": "reward.respect" %>
          </div>
        </div>
      </div>
      <div class="uk-margin">
        <h4 class="uk-margin-remove-bottom">Items</h4>
        <p class="uk-margin-remove-top">
          Items granted through rewards will be added to the player's inventory if space is available. If the player's inventory is full, items will be dropped at their feet in-game.
        </p>
        <div class="uk-form-controls">
          <%= reward_f.hidden_field :reward_items, ":value": "JSON.stringify(reward.reward_items)" %>
          <table class="uk-table uk-table-small">
            <thead>
              <tr>
                <td class="esm-text-subtle uk-padding-remove-left"><strong>Quantity</strong></td>
                <td class="esm-text-subtle"><strong>Item Classname</strong></td>
                <td class="esm-text-subtle"></td>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(quantity, item) in reward.reward_items">
                <td class="uk-width-1-5 uk-padding-remove-left">{{ quantity }}</td>
                <td class="uk-width-4-5">{{ item }}</td>
                <td class="uk-table-shrink">
                  <a class="fas fa-times" uk-tooltip="Remove item" @click="removeItemReward(item)"></a>
                </td>
              </tr>
              <tr>
                <td class="uk-width-1-5 uk-padding-remove-left">
                  <input type="number" class="uk-input" value="1" min="1" placeholder="1" v-model.number="reward_item.quantity"></input>
              </td>
              <td class="uk-width-4-5">
                <input type="text" class="uk-input" placeholder="Exile_Item_EMRE" v-model="reward_item.classname" uk-tooltip="Ensure the classname is correct and is accessible on your server"></input>
            </td>
            <td class="uk-table-shrink">
              <a class="fas fa-plus esm-text-color-toast-green uk-margin-small-top" uk-tooltip="Add Item" @click="addItemReward"></a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<div class="uk-margin">
  <div class="uk-margin-bottom">
    <h3 class="uk-margin-remove-bottom">Visibility</h3>
    <p class="uk-margin-remove-top">
      When enabled, private servers are hidden from the <%= command_usage(:servers, only: []) %> command and Discord join messages. The server remains fully functional but won't be publicly listed. <i>Ideal for testing environments or whitelisted servers.</i>
    </p>
  </div>
  <div class="uk-form-controls">
    <%= f.select :server_visibility,
      options_for_select(
        Server.server_visibilities.transform_keys(&:humanize),
        Server.server_visibilities[f.object&.server_visibility] || 1
      ),
      {},
      class: "uk-select uk-width-1-4"
    %>
  </div>
</div>
<% end %>
</div>