<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>
    <small>Your players will be typing this with every command, make sure to make it short and sweet</small>
  </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>
    <small>Important for new and returning players</small>
  </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>
    <small>Let players know what cool mods you have on your server</small>
  </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>
    <small>What rewards are given to a player when they run the <%= command_usage(:reward, only: []) %> command for your server.<br>
      You can configure how often this command can be used in the <code>Command Configuration</code> section</small>
  </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">
        <h5 class="uk-margin-remove-bottom">Items</h5>
        <small>The following items will only be able to be added if the player has room in their inventory, otherwise they will drop on the ground at the player's feet</small>
        <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">Quantity</td>
                <td class="esm-text-subtle">Item Classname</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">{{ 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">
                  <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>
<% end %>
</div>
</div>