<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>LCEPL Income Tax</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        background: #f3f3f3;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
      }

      .login-container {
        background: white;
        padding: 2rem;
        border-radius: 10px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        width: 300px;
      }

      h2 {
        text-align: center;
        margin-bottom: 1.5rem;
      }

      input[type="text"],
      input[type="password"] {
        width: 100%;
        padding: 0.5rem;
        margin-bottom: 1rem;
        border: 1px solid #ccc;
        border-radius: 5px;
      }

      button {
        width: 100%;
        padding: 0.5rem;
        background: #007bff;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
      }

      .flash {
        color: red;
        text-align: center;
        margin-bottom: 1rem;
      }
      .title {
        text-align: center;
        color: #007bff;
      }

      .subtitle {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="login-container">
      <h1 class="title">Laxmi Civil Engineering Services</h1>
      <h4 class="subtitle">LOGIN</h4>

      {% with messages = get_flashed_messages(with_categories=true) %} {% if
      messages %} {% for category, message in messages %}
      <div class="flash flash-{{ category }}">{{ message }}</div>
      {% endfor %} {% endif %} {% endwith %}

      <form method="post">
        <input type="text" name="username" placeholder="Username" required />
        <input
          type="password"
          name="password"
          placeholder="Password"
          required
        />
        <button type="submit">Login</button>
      </form>
    </div>
  </body>
</html>
