<!DOCTYPE html>
<html>
<head>
  <title>Add New Dish</title>
  <link rel="icon" href="/images/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #f4f4f4;
            background: linear-gradient(to bottom right, #8cf0c6, #85b31c);

    }
    h1 {
      text-align: center;
    }
    input:hover{
         border-color: #007bff;
      box-shadow: 0 0 3px;
      border-width: 3px;
    }
    .container {
      max-width: 600px;
      margin: 0 auto;
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
    .form-group {
      margin-bottom: 15px;
    }
    .form-group label {
      display: block;
      margin-bottom: 5px;
    }
    .form-group input, .form-group textarea, .form-group select {
      width: 100%;
      padding: 8px;
      box-sizing: border-box;
    }
    .form-group textarea {
      resize: vertical;
    }
    .form-group button {
      padding: 10px 20px;
      background-color: #007bff;
      color: white;
      border: none;
      cursor: pointer;
    }
    .form-group button:hover {
      background-color: #0056b3;
    }
  </style>
</head>
<body>
  <h1>Add New Dish</h1>
  <div class="container">
    <form action="/foods/addDish" method="POST">
      <div class="form-group">
        <label for="dist_name">Dish Name</label>
        <input type="text" id="dist_name" name="dist_name" required>
      </div>
      <div class="form-group">
        <label for="ingredients">Ingredients (comma separated)</label>
        <input type="text" id="ingredients" name="ingredients" required>
      </div>
      <div class="form-group">
        <label for="difficulty_cooking">Difficulty Cooking (1-5)</label>
        <input type="number" id="difficulty_cooking" name="difficulty_cooking" min="1" max="5" required>
      </div>
      <div class="form-group">
        <label for="quality">Quality (1-5)</label>
        <input type="number" id="quality" name="quality" min="1" max="5" required>
      </div>
      <div class="form-group">
        <label for="expiration_date">Expiration Date</label>
        <input type="date" id="expiration_date" name="expiration_date" required>
      </div>
      <div class="form-group">
        <label for="quantity">Quantity</label>
        <input type="number" id="quantity" name="quantity" required>
      </div>
      <div class="form-group">
        <label for="storage_location">Storage Location</label>
        <select id="storage_location" name="storage_location" required>
          <option value="Freezer">Freezer</option>
          <option value="Refrigerator">Refrigerator</option>
          <option value="Cupboards">Cupboards</option>
        </select>
      </div>
      <div class="form-group">
        <button type="submit">Add Dish</button>
      </div>
    </form>
  </div>
</body>
</html>
