{% stories form with { title: 'Components/Form' } %}

{% story default with {
    name: '1. Contact Form',
    args: { 
      action: '/contact',
      method: 'POST',
      children: '<div class="space-y-6 p-6 bg-white">
  <div class="form-item mb-4">
    <label class="block text-sm font-semibold text-gray-900 mb-2">Your Name</label>
    <input type="text" name="name" placeholder="John Doe" class="!bg-white border border-gray-300 text-gray-900 text-base focus:ring-2 focus:ring-primary focus:border-primary block w-full px-4 py-3 transition-all placeholder:text-gray-400 hover:border-gray-400" />
  </div>
  
  <div class="form-item mb-4">
    <label class="block text-sm font-semibold text-gray-900 mb-2">Email Address</label>
    <input type="email" name="email" placeholder="your.email@example.com" class="!bg-white border border-gray-300 text-gray-900 text-base focus:ring-2 focus:ring-primary focus:border-primary block w-full px-4 py-3 transition-all placeholder:text-gray-400 hover:border-gray-400" />
    <div class="description text-sm text-gray-600 mt-2">We\'ll never share your email with anyone else.</div>
  </div>
  
  <div class="form-item mb-4">
    <label class="block text-sm font-semibold text-gray-900 mb-2">Subject</label>
    <select name="subject" class="block w-full !bg-white border border-gray-300 text-gray-900 text-base focus:ring-2 focus:ring-primary focus:border-primary px-4 py-3 transition-all cursor-pointer appearance-none bg-[url(\'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEyIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgMUw2IDZMMTEgMSIgc3Ryb2tlPSIjNkI3MjgwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg==\')] bg-no-repeat bg-[position:right_1rem_center] pr-10 hover:border-gray-400">
      <option value="">-- Select a subject --</option>
      <option value="general">General Inquiry</option>
      <option value="support">Technical Support</option>
      <option value="billing">Billing Question</option>
      <option value="feedback">Feedback</option>
    </select>
  </div>
  
  <div class="form-item mb-4">
    <label class="block text-sm font-semibold text-gray-900 mb-2">Message</label>
    <textarea name="message" rows="5" placeholder="Type your message here..." class="form-textarea resize-y block w-full !bg-white border border-gray-300 text-gray-900 text-base focus:ring-2 focus:ring-primary focus:border-primary px-4 py-3 min-h-[120px] transition-all placeholder:text-gray-400 hover:border-gray-400"></textarea>
  </div>
  
  <div class="form-item mb-4">
    <label class="inline-flex items-center cursor-pointer">
      <input type="checkbox" name="newsletter" class="w-5 h-5 text-primary !bg-white border border-gray-300 focus:ring-2 focus:ring-primary transition-all cursor-pointer hover:border-gray-400" />
      <span class="ml-3 text-base text-gray-900">Subscribe to our newsletter</span>
    </label>
  </div>
  
  <div class="form-actions">
    <input type="submit" value="Send Message" class="bg-primary text-white hover:opacity-90 focus:ring-2 focus:ring-primary focus:ring-offset-2 font-semibold text-base px-8 py-3 transition-all cursor-pointer inline-flex items-center justify-center shadow-sm hover:shadow-md" />
  </div>
</div>
'
    }
  } %}
{% embed 'components:form' with { 
  action: action,
  method: method
} %}
  {% block children %}
    {{ children }}
  {% endblock %}
{% endembed %}
{% endstory %}

{% endstories %}
