<%- 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.success == "BOUGHTRESOURCE") { %>
              <div class="bg-green-900/50 border-l-4 border-green-400 rounded-lg text-green-100 px-4 py-3 relative" 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-green-400 mr-3">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                  </div>
                  <div>
                    <p class="font-bold">Purchase Successful</p>
                    <p class="text-sm relative">The resources have been added to your account.</p>
                  </div>
                  <span onclick="location.href = '../store';" class="absolute top-0 bottom-0 right-0 px-4 py-3">
                    <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-green-400">
                      <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                  </span>
                </div>
              </div>
              <% } %> <% if (req.query.err == "NOTENOUGHCOINS") { %>
              <div class="bg-red-900/50 border-l-4 border-red-400 rounded-lg text-red-100 px-4 py-3 relative" 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">Insufficient Balance</p>
                    <p class="text-sm relative">You do not have enough coins to complete this purchase.</p>
                  </div>
                  <span onclick="location.href = '../store';" class="absolute top-0 bottom-0 right-0 px-4 py-3">
                    <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>
              <% } else if (req.query.err == "INVALIDAMOUNT") { %>
                <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">Invalid Amount</p>
                      <p class="text-sm relative">The amount entered is invalid. Please check and try again.</p>
                    </div>
                    <span onclick="location.href = '../admin';" class="absolute top-0 bottom-0 right-0 px-4 py-3">
                      <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>
                <% } else if (req.query.success == "BOUGHTPLAN") { %>
                  <div class="bg-green-900/50 border-l-4 border-green-400 rounded-lg text-green-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-green-400 mr-3">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                        </svg>
                      </div>
                      <div>
                        <p class="font-bold">Plan Purchased Successfully</p>
                        <p class="text-sm relative">You have successfully purchased the plan.</p>
                      </div>
                      <span onclick="location.href = '/store';" class="absolute top-0 bottom-0 right-0 px-4 py-3">
                        <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-green-400">
                          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                      </span>
                    </div>
                  </div>
                  <% } else if (req.query.err == "ALREADYPLAN") { %>
                    <div class="bg-yellow-900/50 border-l-4 border-yellow-400 rounded-lg text-yellow-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-yellow-400 mr-3">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                          </svg>
                        </div>
                        <div>
                          <p class="font-bold">Plan Already Purchased</p>
                          <p class="text-sm relative">You already have this plan.</p>
                        </div>
                        <span onclick="location.href = '/store';" class="absolute top-0 bottom-0 right-0 px-4 py-3">
                          <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-yellow-400">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                          </svg>
                        </span>
                      </div>
                    </div>
                    <% } else if (req.query.err == "INVALIDPLAN") { %>
                      <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">Invalid Plan</p>
                            <p class="text-sm relative">The plan you selected is not valid. Please choose a valid plan.</p>
                          </div>
                          <span onclick="location.href = '/store';" class="absolute top-0 bottom-0 right-0 px-4 py-3">
                            <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>
                    <% } %>

              <!-- Resource Plans -->
              <h2 class="text-white font-bold">Plans</h2>
              <p class="text-gray-400">Upgrade your plans to get more resources</p>

              <div class="relative bg-transparent">
                <div class="relative max-w-7xl mx-auto">
                  <div class="mt-6 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
                  
                    <% resourcePlans.forEach(plan => { %>
                    <div class="flex flex-col rounded-lg shadow overflow-hidden bg-gray-700/50">
                      <div class="p-6 flex flex-col justify-between flex-1">
                        <div>
                          <h3 class="text-xl font-semibold text-white mb-4"><%= plan.name %></h3>
                          <p class="text-base text-gray-300 mb-2"><%= plan.price %> coins</p>
                          <p class="text-base text-gray-300 mb-2">Resources:</p>
                          <ul class="text-base text-gray-300 list-disc pl-6">
                            <li><%= plan.resources.cpu %> CPU</li>
                            <li><%= plan.resources.ram %> MB RAM</li>
                            <li><%= plan.resources.disk %> MB Disk</li>
                          </ul>
                        </div>
                        <% if (plan.hasPlan) { %>
                          <a class="mt-4 transition ease-in-out delay-100 group relative flex items-center justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-green-400 bg-green-900/50 border-green-400 hover:bg-green-800/50 focus:outline-none">
                            You already have this plan 
                        <% } else { %>
                        <a href="../buyplan?plan=<%= plan.id %>" class="mt-4 transition ease-in-out delay-100 group relative flex items-center justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-500 hover:bg-blue-600 focus:outline-none">
                          Purchase
                        <% } %>
                        </a>
                      </div>
                    </div>
                    <% }) %>
                  
                  </div>
                </div>
              </div>

              <br />

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

              <!-- This example requires Tailwind CSS v2.0+ -->
              <h2 class="text-white font-bold">Buy extra</h2>
              <p class="text-gray-400">Buy extra if you want additional resources</p>
              <div class="relative bg-transparent">
                <div class="relative max-w-7xl mx-auto">
                  <div class="mt-6 max-w-lg mx-auto grid gap-5 lg:grid-cols-3 lg:max-w-none">

                    <div class="flex flex-col rounded-lg shadow overflow-hidden">
                      <div class="flex-1 bg-gray-700/50 p-6 flex flex-col justify-between">
                        <div class="flex-1">
                          <a href="#" class="block mt-2">
                            <p class="text-xl font-semibold text-white">Buy extra CPU</p>
                            <p class="mt-3 text-base text-gray-300">Amount: 100%</p>
                            <p class="mt-3 text-base text-gray-300">Cost: <%= resourceCosts.cpu %> coins</p>
                          </a>
                        </div>
                        <a href="../buyresource?resource=cpu&amount=1" type="button" class="mt-4 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"> Purchase </a>
                      </div>
                    </div>

                    <div class="flex flex-col rounded-lg shadow overflow-hidden">
                      <div class="flex-1 bg-gray-700/50 p-6 flex flex-col justify-between">
                        <div class="flex-1 mb-4">
                          <a href="#" class="block mt-2">
                            <p class="text-xl font-semibold text-white">Buy extra RAM</p>
                            <p class="mt-3 text-base text-gray-300">Amount: 1024MB</p>
                            <p class="mt-3 text-base text-gray-300">Cost: <%= resourceCosts.ram %> coins</p>
                          </a>
                        </div>
                        <a href="../buyresource?resource=ram&amount=1" type="button" class="mt-4 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"> Purchase </a>
                      </div>
                    </div>

                    <div class="flex flex-col rounded-lg shadow overflow-hidden">
                      <div class="flex-1 bg-gray-700/50 p-6 flex flex-col justify-between">
                        <div class="flex-1">
                          <a href="#" class="block mt-2">
                            <p class="text-xl font-semibold text-white">Buy extra Disk</p>
                            <p class="mt-3 text-base text-gray-300">Amount: 1024MB</p>
                            <p class="mt-3 text-base text-gray-300">Cost: <%= resourceCosts.disk %> coins</p>
                          </a>
                        </div>
                        <a href="../buyresource?resource=disk&amount=10" type="button" class="mt-4 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"> Purchase </a>
                      </div>
                    </div>

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

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