<!DOCTYPE html>
<html>
  <head>
    <title><%= t.medicationCreate.title %></title>
    <link rel="stylesheet" href="/css/bootstrap.min.css" />
  </head>
  <body class="bg-light">
    <div class="container mt-4">
      <h4>➕ <%= t.medicationCreate.title %></h4>

      <% if (error) { %>
      <div class="alert alert-danger"><%= error %></div>
      <% } %>

      <form method="POST" action="/medications/create">
        <div class="mb-3">
          <label class="form-label"><%= t.medicationCreate.medication %></label>
          <input name="name" class="form-control" required />
        </div>

        <div class="mb-3">
          <label class="form-label"><%= t.medicationCreate.form %></label>
          <select name="form_id" class="form-control" required>
            <% forms.forEach(f => { %>
            <option value="<%= f.id %>"><%= f.name %></option>
            <% }) %>
          </select>
        </div>

        <div class="mb-3">
          <label class="form-label"><%= t.medicationCreate.dosage %></label>
          <input name="dosage" class="form-control" required />
        </div>

        <div class="mb-3">
          <label class="form-label"><%= t.medicationCreate.package %></label>
          <input name="package" class="form-control" />
        </div>

        <button class="btn btn-success"><%= t.medicationCreate.save %></button>
        <a href="/medications" class="btn btn-secondary"><%= t.medicationCreate.cancel %></a>
      </form>
    </div>
  </body>
</html>
