<%# app/views/programs/_form.html.erb %>

<style>
/* 🔹 FORM CONTAINER ANIMATION */
.animated-form {
  background: linear-gradient(135deg, #f0f8ff, #e8f5e9);
  border-radius: 15px;
  padding: 2.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  margin: 3rem auto;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.animated-form:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

/* 🔹 LABEL + INPUT STYLE */
.animated-form label {
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 8px;
  transition: color 0.3s ease;
}

.animated-form input {
  width: 100%;
  padding: 10px 15px;
  border-radius: 8px;
  border: 2px solid #ccc;
  transition: all 0.3s ease;
  font-size: 1rem;
}

.animated-form input:focus {
  border-color: #4caf50;
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.4);
  outline: none;
}

/* 🔹 SUBMIT BUTTON */
.animated-form .submit-btn {
  background: linear-gradient(135deg, #4caf50, #2e7d32);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 1.2rem;
  cursor: pointer;
  width: 100%;
  transition: background 0.3s ease, transform 0.2s ease;
}

.animated-form .submit-btn:hover {
  background: linear-gradient(135deg, #43a047, #1b5e20);
  transform: scale(1.03);
}

/* 🔹 ERROR STYLING */
.animated-form .error-box {
  background: rgba(255, 0, 0, 0.1);
  border-left: 4px solid #e53935;
  color: #b71c1c;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  animation: fadeIn 0.6s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>

<div class="animated-form">
  <%= form_with(model: program, local: true) do |form| %>
    
    <% if program.errors.any? %>
      <div class="error-box">
        <h5><%= pluralize(program.errors.count, "error") %> prevented this program from being saved:</h5>
        <ul>
          <% program.errors.each do |error| %>
            <li><%= error.full_message %></li>
          <% end %>
        </ul>
      </div>
    <% end %>

    <div class="mb-3">
      <%= form.label :name %>
      <%= form.text_field :name, placeholder: "Enter program name" %>
    </div>

    <div class="mb-3">
      <%= form.label :date %>
      <%= form.date_field :date %>
    </div>

    <div class="mb-3">
      <%= form.label :leadingPerson, "Leading Person" %>
      <%= form.text_field :leadingPerson, placeholder: "Who leads this program?" %>
    </div>

    <%= form.submit "Save Program", class: "submit-btn" %>
  <% end %>
</div>
