{% stories fieldset with { title: 'Components/Fieldset' } %}

{% story address with {
    name: '1. Address Fieldset',
    args: { 
      required: true,
      children: '<div class="space-y-4 p-4 bg-white">
  <div class="form-item mb-4">
    <label class="block text-sm font-semibold text-gray-900 mb-2">Street Address</label>
    <input type="text" name="street" placeholder="123 Main Street" class="bg-white border-2 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 hover:border-gray-400" />
  </div>
  <div class="grid grid-cols-2 gap-4">
    <div class="form-item">
      <label class="block text-sm font-semibold text-gray-900 mb-2">City</label>
      <input type="text" name="city" placeholder="New York" class="bg-white border-2 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 hover:border-gray-400" />
    </div>
    <div class="form-item">
      <label class="block text-sm font-semibold text-gray-900 mb-2">State</label>
      <select name="state" class="block w-full bg-white border-2 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 State</option>
        <option value="NY">New York</option>
        <option value="CA">California</option>
        <option value="TX">Texas</option>
      </select>
    </div>
  </div>
  <div class="form-item mb-4">
    <label class="block text-sm font-semibold text-gray-900 mb-2">ZIP Code</label>
    <input type="text" name="zip" placeholder="10001" class="bg-white border-2 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 hover:border-gray-400" />
  </div>
</div>
'
    }
  } %}
{% embed 'components:fieldset' with { 
  required: required
} %}
  {% block children %}
    {{ children }}
  {% endblock %}
{% endembed %}
{% endstory %}

{% story default with {
    name: '2. Fieldset',
    args: { 
      required: false,
      children: '<div class="space-y-4 p-4 bg-white">
  <div class="form-item mb-4">
    <label class="block text-sm font-semibold text-gray-900 mb-2">First Name</label>
    <input type="text" name="firstname" placeholder="John" class="bg-white border-2 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 hover:border-gray-400" />
  </div>
  <div class="form-item mb-4">
    <label class="block text-sm font-semibold text-gray-900 mb-2">Last Name</label>
    <input type="text" name="lastname" placeholder="Doe" class="bg-white border-2 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 hover:border-gray-400" />
  </div>
</div>
'
    }
  } %}
{% embed 'components:fieldset' with { 
  required: required
} %}
  {% block children %}
    {{ children }}
  {% endblock %}
{% endembed %}
{% endstory %}

{% endstories %}
