<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Success!</title>

    <style>
      /* San Francisco / Apple System Font */
      html {
        font-family: -apple-system, BlinkMacSystemFont, "San Francisco",
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        background-color: #f5f5f7;
        color: #1d1d1f;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem;
      }

      .container {
        background-color: #fff;
        border-radius: 20px;
        padding: 2.5rem;
        max-width: 500px;
        width: 100%;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        text-align: center;
      }

      h1 {
        font-size: 2rem;
        margin-bottom: 1rem;
        font-weight: 600;
      }

      p {
        margin: 0.5rem 0;
        font-size: 1rem;
      }

      strong {
        color: #007aff;
      }

      .buttons {
        margin-top: 2rem;
        display: flex;
        gap: 1rem;
        justify-content: center;
        flex-wrap: wrap;
      }

      button,
      .btn-link {
        padding: 0.75rem 1.5rem;
        border: none;
        border-radius: 12px;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        text-decoration: none;
        text-align: center;
        transition: background-color 0.2s ease;
      }

      button {
        background-color: #007aff;
        color: white;
      }

      button:hover {
        background-color: #005ecb;
      }

      .btn-secondary {
        background-color: #e5e5ea;
        color: #1d1d1f;
      }

      .btn-secondary:hover {
        background-color: #d1d1d6;
      }

      a {
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>✅ Recipe created successfully!</h1>
      <p>Filename: <strong><%= filename %></strong></p>
      <p>File path: <strong><%= path %></strong></p>

      <div class="buttons">
        <a href="/add"
          ><button class="btn-secondary">➕ Add more recipes</button></a
        >
        <a href="/"><button>📖 View all recipes</button></a>
      </div>
    </div>
  </body>
</html>
