{% extends "account/base.jinja" %}
{% block title %}
 콘솔 -
{% endblock title %}
{% block head %}
 {{ super() }}
 <link rel="stylesheet"
       href="{{ url_for('static', filename='css/index.css') }}" />
{% endblock head %}
{% block content %}
 <!-- Grid -->
 <div class="grid grid-cols-1 sm:grid-cols-1 gap-3">
  <!-- Card -->
  <div class="flex flex-col bg-white border border-gray-200 rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
   <!-- Body -->
   <div class="h-full p-4 md:p-6">
    <!-- Grid -->
    <div class="mt-3 grid grid-cols-2 gap-x-2">
     <div>
      <div class="flex items-center gap-x-2">
       <h2 class="text-xl font-semibold text-gray-800 dark:text-neutral-200">
        <a href="#" class="hover:underline">My Server</a>
       </h2>
       <span class="inline-flex items-center gap-1.5 py-1.5 px-2 text-xs font-medium bg-blue-100 text-blue-800 rounded-full dark:bg-blue-500/10 dark:text-blue-500">
        <span class="size-1.5 inline-block bg-blue-800 rounded-full dark:bg-blue-500"></span>
        Active
       </span>
      </div>
      <p class="mt-1.5 text-sm text-gray-500 dark:text-neutral-500">C1#1234</p>
      <p class="text-sm text-gray-500 dark:text-neutral-500">2 vCPUs / 4 GB RAM / 40 GB SSD</p>
     </div>
     <!-- End Col -->
     <div class="text-end">
      <div class="flex justify-between items-center gap-x-2 mb-1">
       <div></div>
       <a href="#"
          class="font-medium text-sm text-gray-800 dark:text-neutral-200 flex items-center hover:underline">
        <span>127.0.0.1</span>
        <span href="#" class="ml-2">
         <svg xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="0"
              stroke="currentColor"
              class="size-4">
          <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M21 8C21 6.34315 19.6569 5 18 5H10C8.34315 5 7 6.34315 7 8V20C7 21.6569 8.34315 23 10 23H18C19.6569 23 21 21.6569 21 20V8ZM19 8C19 7.44772 18.5523 7 18 7H10C9.44772 7 9 7.44772 9 8V20C9 20.5523 9.44772 21 10 21H18C18.5523 21 19 20.5523 19 20V8Z" />
          <path fill="currentColor" d="M6 3H16C16.5523 3 17 2.55228 17 2C17 1.44772 16.5523 1 16 1H6C4.34315 1 3 2.34315 3 4V18C3 18.5523 3.44772 19 4 19C4.55228 19 5 18.5523 5 18V4C5 3.44772 5.44772 3 6 3Z" />
         </svg>
        </span>
       </a>
      </div>
     </div>
     <!-- End Col -->
    </div>
    <!-- End Grid -->
    <!-- Progress -->
    <div class="my-4">
     <div class="flex justify-between items-center gap-x-2 mb-1 -mt-9">
      <div></div>
      <p class="text-sm text-gray-500 dark:text-neutral-500">Created 9 hours ago</p>
     </div>
    </div>
   </div>
   <!-- End Body -->
  </div>
  <!-- End Card --> <!-- Card -->
  <div class="flex flex-col bg-white border border-gray-200 rounded-xl dark:bg-neutral-800 dark:border-neutral-700">
   <!-- Body -->
   <div class="h-full p-4 md:p-6">
    <!-- Grid -->
    <div class="mt-3 grid grid-cols-2 gap-x-2">
     <div>
      <div class="flex items-center gap-x-2">
       <h2 class="text-xl font-semibold text-gray-800 dark:text-neutral-200">
        <a href="#" class="hover:underline">My Server</a>
       </h2>
       <span class="inline-flex items-center gap-1.5 py-1.5 px-2 text-xs font-medium bg-blue-100 text-blue-800 rounded-full dark:bg-blue-500/10 dark:text-blue-500">
        <span class="size-1.5 inline-block bg-blue-800 rounded-full dark:bg-blue-500"></span>
        Active
       </span>
      </div>
      <p class="mt-1.5 text-sm text-gray-500 dark:text-neutral-500">C1#1234</p>
      <p class="text-sm text-gray-500 dark:text-neutral-500">2 vCPUs / 4 GB RAM / 40 GB SSD</p>
     </div>
     <!-- End Col -->
     <div class="text-end">
      <div class="flex justify-between items-center gap-x-2 mb-1">
       <div></div>
       <a href="#"
          class="font-medium text-sm text-gray-800 dark:text-neutral-200 flex items-center hover:underline">
        <span>127.0.0.1</span>
        <span href="#" class="ml-2">
         <svg xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="0"
              stroke="currentColor"
              class="size-4">
          <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M21 8C21 6.34315 19.6569 5 18 5H10C8.34315 5 7 6.34315 7 8V20C7 21.6569 8.34315 23 10 23H18C19.6569 23 21 21.6569 21 20V8ZM19 8C19 7.44772 18.5523 7 18 7H10C9.44772 7 9 7.44772 9 8V20C9 20.5523 9.44772 21 10 21H18C18.5523 21 19 20.5523 19 20V8Z" />
          <path fill="currentColor" d="M6 3H16C16.5523 3 17 2.55228 17 2C17 1.44772 16.5523 1 16 1H6C4.34315 1 3 2.34315 3 4V18C3 18.5523 3.44772 19 4 19C4.55228 19 5 18.5523 5 18V4C5 3.44772 5.44772 3 6 3Z" />
         </svg>
        </span>
       </a>
      </div>
     </div>
     <!-- End Col -->
    </div>
    <!-- End Grid -->
    <!-- Progress -->
    <div class="my-4">
     <div class="flex justify-between items-center gap-x-2 mb-1 -mt-9">
      <div></div>
      <p class="text-sm text-gray-500 dark:text-neutral-500">Created 9 hours ago</p>
     </div>
    </div>
   </div>
   <!-- End Body -->
  </div>
  <!-- End Card -->
 </div>
 <!-- End Grid -->
{% endblock content %}