<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%= title %></title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.css"
    />
    <style>
      body {
        margin: 0;
        padding: 0;
        height: 100vh;
        overflow: hidden;
      }
      .login-container {
        display: flex;
        height: 100vh;
      }
      .logo-section {
        flex: 1;
        background-color: #f8f9fa;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
      }
      .logo-content {
        text-align: center;
        max-width: 500px;
      }
      .logo-image {
        width: 100%;
        max-width: 400px;
        height: auto;
        margin-bottom: 20px;
      }
      .form-section {
        flex: 1;
        background-color: #ffd0d0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
        position: relative;
      }
      .color-code {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 24px;
        font-weight: bold;
        color: #333;
      }
      .login-box {
        background: white;
        border: 2px solid #333;
        padding: 60px 50px;
        width: 100%;
        max-width: 500px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
      .login-title {
        font-size: 2.5rem;
        font-weight: bold;
        text-align: center;
        margin-bottom: 10px;
        color: #333;
      }
      .login-subtitle {
        font-size: 1.1rem;
        color: #666;
        text-align: center;
        margin-bottom: 40px;
      }
      .form-label {
        font-weight: 600;
        color: #333;
        margin-bottom: 5px;
        font-size: 1rem;
      }
      .form-control {
        border: 2px solid #ddd;
        padding: 12px 15px;
        font-size: 1rem;
        border-radius: 4px;
      }
      .form-control:focus {
        border-color: #333;
        box-shadow: none;
      }
      .btn-group-custom {
        display: flex;
        gap: 15px;
        margin-top: 30px;
        margin-bottom: 30px;
      }
      .btn-custom {
        flex: 1;
        padding: 12px 20px;
        font-size: 1rem;
        font-weight: 600;
        border: 2px solid #333;
        border-radius: 4px;
        cursor: pointer;
        transition: all 0.3s;
      }
      .btn-login {
        background-color: white;
        color: #333;
      }
      .btn-login:hover {
        background-color: #333;
        color: white;
      }
      .btn-reset {
        background-color: white;
        color: #333;
      }
      .btn-reset:hover {
        background-color: #f0f0f0;
      }
      .back-link {
        text-align: center;
        margin-top: 20px;
      }
      .back-link a {
        color: #ff6b6b;
        text-decoration: none;
        font-size: 1.1rem;
        font-weight: 500;
      }
      .back-link a:hover {
        color: #ff5252;
        text-decoration: underline;
      }
      .alert {
        margin-bottom: 25px;
        border-radius: 4px;
        padding: 12px 15px;
      }
      @media (max-width: 992px) {
        .login-container {
          flex-direction: column;
        }
        .logo-section,
        .form-section {
          flex: none;
          height: 50vh;
        }
        .color-code {
          font-size: 18px;
        }
        .login-box {
          padding: 40px 30px;
        }
      }
      @media (max-width: 576px) {
        .login-box {
          padding: 30px 20px;
        }
        .login-title {
          font-size: 2rem;
        }
      }
    </style>
  </head>
  <body>
    <div class="login-container">
      <!-- Left Section - Logo -->
      <div class="logo-section">
        <div class="logo-content">
          <img
            src="/uploads/cat-logo-template-page-20251224-194356-0000-1766724728795-173839741.png"
            alt="Sky Art Shop Logo"
            class="logo-image"
            onerror="this.style.display='none'; this.nextElementSibling.style.display='block';"
          />
          <div style="display: none">
            <svg
              width="400"
              height="300"
              viewBox="0 0 400 300"
              xmlns="http://www.w3.org/2000/svg"
            >
              <!-- Cat Silhouette -->
              <path
                d="M120 80 Q100 60 90 80 L80 100 Q70 120 80 140 L100 160 Q110 180 140 180 L160 185 Q180 190 200 180 L220 160 Q230 140 220 120 L210 100 Q200 80 180 80 Z"
                fill="#000"
              />
              <circle cx="110" cy="100" r="8" fill="#000" />
              <circle cx="170" cy="100" r="8" fill="#000" />
              <!-- Text -->
              <text
                x="50"
                y="240"
                font-family="'Brush Script MT', cursive"
                font-size="48"
                fill="#000"
              >
                Sky Art Shop
              </text>
            </svg>
          </div>
        </div>
      </div>

      <!-- Right Section - Form -->
      <div class="form-section">
        <div class="color-code">#ffd0d0</div>
        <div class="login-box">
          <h1 class="login-title">Sky Art Shop</h1>
          <p class="login-subtitle">Admin Panel Login</p>

          <% if (error === 'invalid') { %>
          <div class="alert alert-danger">
            <i class="bi bi-exclamation-triangle"></i> Invalid email or password
          </div>
          <% } else if (error === 'server') { %>
          <div class="alert alert-danger">
            <i class="bi bi-exclamation-triangle"></i> Server error. Please try
            again.
          </div>
          <% } %>

          <form method="POST" action="/admin/login" id="loginForm">
            <div class="mb-3">
              <label for="email" class="form-label">Username:</label>
              <input
                type="email"
                class="form-control"
                id="email"
                name="email"
                placeholder="Enter your email"
                required
                autofocus
              />
            </div>

            <div class="mb-3">
              <label for="password" class="form-label">Password:</label>
              <input
                type="password"
                class="form-control"
                id="password"
                name="password"
                placeholder="Enter your password"
                required
              />
            </div>

            <div class="btn-group-custom">
              <button
                type="submit"
                class="btn-custom btn-login"
                id="loginButton"
              >
                Login
              </button>
              <button
                type="button"
                class="btn-custom btn-reset"
                onclick="document.getElementById('loginForm').reset();"
              >
                Reset
              </button>
            </div>
          </form>

          <div class="back-link">
            <a href="/">Back to Website</a>
          </div>
        </div>
      </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>
