<%- include('./components/wrapper') %>

<main id="content" class="flex-1">
  <div class="py-6">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 md:px-8">
      <!-- Content -->
      <% if (req.query.err) { %>
        <div class="bg-red-900/50 border-l-4 border-red-400 rounded-lg text-red-100 px-4 py-3 relative mb-8" role="alert">
          <div class="flex">
            <div class="py-1">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-red-400 mr-3">
                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
              </svg>
            </div>
            <div>
              <p class="font-bold"><%= req.query.err === 'MISSINGPARAMS' ? 'Missing Parameters' : 
              req.query.err === 'NOTENOUGHRESOURCES' ? 'Insufficient Resources' : 
              req.query.err === 'INVALID' ? 'Invalid Characters' : 
              req.query.err === 'ERRORONCREATE' ? 'Internal Server Error' : 
              req.query.err === 'INVALID_EGG' ? 'Invalid egg(s)' : '' %></p>
              <p class="text-sm relative"><%= req.query.err === 'MISSINGPARAMS' ? 'All inputs must be filled out in order for you to create a server.' : 
              req.query.err === 'NOTENOUGHRESOURCES' ? 'You\'ll need more resources to create a server with the specified amount of resources.' : 
              req.query.err === 'INVALID' ? 'One of your inputs has invalid characters in it.' : 
              req.query.err === 'ERRORONCREATE' ? 'PalPod couldn\'t process the action due to an internal issue.' : 
              req.query.err === 'INVALID_EGG' ? 'PalPod couldn\'t process the action due to invalid egg(s).' : '' %></p>
            </div>
            <span onclick="location.href = '<%= req.query.err === 'ERRORONCREATE' ? '../dashboard' : '../create-server' %>';" class="absolute top-0 bottom-0 right-0 px-4 py-3 cursor-pointer">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-red-400">
                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </span>
          </div>
        </div>
      <% } %>

      <!-- Basic Details -->
      <div>
        <div class="md:grid md:grid-cols-3 md:gap-6">
          <div class="md:col-span-1">
            <div class="px-4 sm:px-0">
              <h3 class="text-lg font-medium leading-6 text-white">Basic Details</h3>
              <p class="mt-1 text-sm text-gray-400">This information will be displayed in the server management list on both the Panel and Dashboard.</p>
            </div>
          </div>
          <div class="mt-5 md:col-span-2 md:mt-0">
            <div class="shadow sm:overflow-hidden sm:rounded-md">
              <div class="space-y-6 border border-gray-500/20 px-4 py-5 sm:p-6 rounded-md">
                <div class="grid grid-cols-3 gap-6">
                  <div class="col-span-3 sm:col-span-2">
                    <label for="name" class="block text-sm font-medium text-gray-400">Server Name</label>
                    <div class="mt-1 flex rounded-md shadow-sm">
                      <input type="text" name="name" id="name" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 w-full items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 border border-black/10" placeholder="My server" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="hidden sm:block" aria-hidden="true">
        <div class="py-5">
          <div class="border-t border-gray-700/75"></div>
        </div>
      </div>

      <!-- Configuration -->
      <div class="mt-10 sm:mt-0">
        <div class="md:grid md:grid-cols-3 md:gap-6">
          <div class="md:col-span-1">
            <div class="px-4 sm:px-0">
              <h3 class="text-lg font-medium leading-6 text-white">Configuration</h3>
              <p class="mt-1 text-sm text-gray-400">Choose the node and image for your server. This cannot be changed.</p>
            </div>
          </div>
          <div class="mt-5 md:col-span-2 md:mt-0">
            <div class="overflow-hidden shadow sm:rounded-md">
              <div class="space-y-6 border border-gray-500/20 px-4 py-5 sm:p-6 rounded-md">
                <div class="grid grid-cols-3 gap-6">
                  <div class="col-span-3 sm:col-span-2">
                    <label for="node" class="block text-sm font-medium text-gray-400">Node</label>
                    <div class="mt-1 flex rounded-md shadow-sm">
                      <select name="node" id="node" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 w-full pr-10 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 border border-black/10">
                        <% nodes.forEach(function(node) { %>
                          <option value="<%= node.id %>"><%= node.name %></option>
                        <% }); %>
                      </select>
                    </div>
                  </div>
                  <div class="col-span-3 sm:col-span-2">
                    <label for="image" class="block text-sm font-medium text-gray-400">Image</label>
                    <div class="mt-1 flex rounded-md shadow-sm">
                      <select name="image" id="image" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 w-full pr-10 items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 border border-black/10">
                        <% images.forEach(function(image) { %>
                          <option value="<%= image.Id %>"><%= image.Name %></option>
                        <% }); %>
                      </select>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="hidden sm:block" aria-hidden="true">
        <div class="py-5">
          <div class="border-t border-gray-700/75"></div>
        </div>
      </div>

      <!-- Resources -->
      <div class="mt-10 sm:mt-0">
        <div class="md:grid md:grid-cols-3 md:gap-6">
          <div class="md:col-span-1">
            <div class="px-4 sm:px-0">
              <h3 class="text-lg font-medium leading-6 text-white">Resources</h3>
              <p class="mt-1 text-sm text-gray-400">Decide how much of your total resource balance should be allocated to this server.</p>
            </div>
          </div>
          <div class="mt-5 md:col-span-2 md:mt-0">
            <div class="shadow sm:overflow-hidden sm:rounded-md">
              <div class="space-y-6 border border-gray-500/20 px-4 py-5 sm:p-6 rounded-md">
                <div class="grid grid-cols-3 gap-6">
                  <div class="col-span-3 sm:col-span-2">
                    <label for="cpu" class="block text-sm font-medium text-gray-400">CPU (cores)</label>
                    <div class="mt-1 flex rounded-md shadow-sm">
                      <input type="number" name="cpu" id="cpu" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 w-full items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 border border-black/10" placeholder="2" min="1" max="16" />
                    </div>
                  </div>
                  <div class="col-span-3 sm:col-span-2">
                    <label for="memory" class="block text-sm font-medium text-gray-400">Memory (MB)</label>
                    <div class="mt-1 flex rounded-md shadow-sm">
                      <input type="number" name="memory" id="memory" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 w-full items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 border border-black/10" placeholder="2048" min="512" max="32768" />
                    </div>
                  </div>
                  <div class="col-span-3 sm:col-span-2">
                    <label for="disk" class="block text-sm font-medium text-gray-400">Disk (GB)</label>
                    <div class="mt-1 flex rounded-md shadow-sm">
                      <input type="number" name="disk" id="disk" class="rounded-lg focus:ring-transparent focus:border-transparent text-white text-sm mt-2 w-full items-center transition justify-left gap-16 hover:bg-white/5 px-4 py-2 flex border-white/5 bg-neutral-900 placeholder:text-white/20 border border-black/10" placeholder="10" min="5" max="1000" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Confirmation -->
      <div class="hidden sm:block" aria-hidden="true">
        <div class="py-5">
          <div class="border-t border-gray-700/75"></div>
        </div>
      </div>
      <div>
        <div class="md:grid md:grid-cols-3 md:gap-6">
          <div class="md:col-span-1">
            <div class="px-4 sm:px-0">
              <h3 class="text-lg font-medium leading-6 text-white">Confirm Details</h3>
              <p class="mt-1 text-sm text-gray-400">Once you are ready, click the Create button.</p>
            </div>
          </div>
          <div class="mt-5 md:col-span-2 md:mt-0">
            <div class="sm:overflow-hidden sm:rounded-md">
              <div class="flex justify-end w-full">
                <button onclick="submitForm()" class="transition ease-in-out delay-100 group relative flex w-1/4 justify-center rounded-md border border-transparent bg-blue-500 py-2 px-4 text-sm font-medium text-white hover:bg-blue-600 focus:outline-none mb-12">
                  Create
                </button>
                <script>
                  async function submitForm() {
                    let name = encodeURIComponent(document.getElementById("name").value);
                    let image = encodeURIComponent(document.getElementById("image").value);
                    let ram = encodeURIComponent(document.getElementById("ram").value);
                    let cpu = encodeURIComponent(document.getElementById("cpu").value);
                    let node = encodeURIComponent(document.getElementById("node").value);
                    let disk = encodeURIComponent(document.getElementById("disk").value);
                    document.location.href = `/create?name=${name}&image=${image}&ram=${ram}&cpu=${cpu}&node=${node}&disk=${disk}`;
                  }
                </script>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</main>
