<%- include('./components/wrapper') %>
<% 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>
      <% } %>
<!-- This example requires Tailwind CSS v2.0+ -->
<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 RAM</p>
                <p class="mt-3 text-base text-gray-300">Amount: 1024MB</p>
                <p class="mt-3 text-base text-gray-300">Cost: 500 coins</p>
              </a>
              <a href="../buyresource?resource=ram&amount=1" type="button" class="mt-8 transition px-4 py-2 text-sm font-medium text-white bg-blue-500 border border-blue-500 rounded-lg hover:bg-blue-600 hover:text-white focus:z-10 focus:ring-2 focus:ring-blue-600 focus:text-white">
                Purchase
              </a >
            </div>
          </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 CPU</p>
                    <p class="mt-3 text-base text-gray-300">Amount: 100%</p>
                    <p class="mt-3 text-base text-gray-300">Cost: 750 coins</p>
                  </a>
                  <a href="../buyresource?resource=cpu&amount=1" type="button" class="mt-8 transition px-4 py-2 text-sm font-medium text-white bg-blue-500 border border-blue-500 rounded-lg hover:bg-blue-600 hover:text-white focus:z-10 focus:ring-2 focus:ring-blue-600 focus:text-white">
                    Purchase
                  </a >
                </div>
              </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: 10240MB</p>
                    <p class="mt-3 text-base text-gray-300">Cost: 400 coins</p>
                  </a>
                  <a href="../buyresource?resource=disk&amount=10" type="button" class="mt-8 transition px-4 py-2 text-sm font-medium text-white bg-blue-500 border border-blue-500 rounded-lg hover:bg-blue-600 hover:text-white focus:z-10 focus:ring-2 focus:ring-blue-600 focus:text-white">
                    Purchase
                  </a >
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>
  
  
            <!-- /End replace -->
          </div>
        </div>
      </main>
    </div>
  </div>
  
  <%- include('./components/footer') %>