{% load cotton %}

<div class="component-variants">
    <h1>Icon List Component</h1>

    {% for variant in variants %}
    <div class="component-variant">
        <h2 class="variant-title">{{ variant.title }}</h2>

        {% cotton icon_list variant="{{ variant.variant|default:'' }}" size="{{ variant.size|default:'' }}" %}
            {% for item in variant.items %}
            {% cotton icon_list.item icon="{{ item.icon }}" icon_color="{{ item.icon_color|default:'' }}" title="{{ item.title|default:'' }}" title_tag="{{ item.title_tag|default:'h4' }}" %}
                {% if item.content %}
                {{ item.content }}
                {% endif %}
            {% endcotton %}
            {% endfor %}
        {% endcotton %}
    </div>
    {% endfor %}
</div>

name: Icon List
context:
  variants:
    - title: "Default Icon List"
      items:
        - icon: "check_circle"
          icon_color: "text-green"
          content: "Wash your hands for 20 seconds with soap"
        - icon: "check_circle"
          icon_color: "text-green"
          content: "Stay six feet away from others"
        - icon: "cancel"
          icon_color: "text-red"
          content: "Avoid large gatherings"

    - title: "Primary Icon List (Simple Content)"
      variant: "primary"
      items:
        - icon: "thumb_up_alt"
          content: "No processing lines"
        - icon: "thumb_up_alt"
          content: "Access to expedited entry benefits in other countries"
        - icon: "thumb_up_alt"
          content: "Available at major U.S. airports"
        - icon: "thumb_up_alt"
          content: "Reduced wait times"

    - title: "Icon List with Rich Content"
      items:
        - icon: "check_circle"
          icon_color: "text-ink"
          title: "Donate cash when possible."
          content: "Financial contributions to recognized disaster relief organizations are the fastest, most flexible and most effective method of donating. Organizations on the ground know what items and quantities are needed, often buy in bulk with discounts and, if possible, purchase through businesses local to the disaster, which supports economic recovery."
        - icon: "check_circle"
          icon_color: "text-ink"
          title: "Confirm what donations are needed."
          content: "Unneeded and unsolicited goods burden local organizations' ability to meet survivors' confirmed needs, drawing away valuable volunteer labor, transportation and warehouse space."
        - icon: "check_circle"
          icon_color: "text-ink"
          title: "Talk to trusted organizations about volunteering."
          content: "Financial contributions to recognized disaster relief organizations are the fastest, most flexible and most effective method of donating. Organizations on the ground know what items and quantities are needed, often buy in bulk with discounts and, if possible, purchase through businesses local to the disaster, which supports economic recovery."

    - title: "Large Icon List with Rich Content"
      size: "lg"
      items:
        - icon: "attach_money"
          icon_color: "text-green"
          title: "Let the sun shine."
          content: "On sunny days, open your curtains to allow the sun to naturally warm the rooms of your home without using electricity. Natural sunlight can also lift your mood to help brighten your day. On warm days, close your curtains to help keep your house cool."
        - icon: "attach_money"
          icon_color: "text-green"
          title: "Adjust your schedule."
          content: "Instead of running high-energy-use appliances such as dishwashers and clothes dryers during mid-afternoon or early evening hours, operate them early in the morning or late at night. Some utilities charge less at off-peak times, which will help reduce your costs."
        - icon: "attach_money"
          icon_color: "text-green"
          title: "Fill it up."
          content: "Wash full loads, whether it's clothes or dishes. Washing multiple small loads means you're using and heating more water, which can increase your expenses. Using cold water for clothes washing can also help lower your costs."

    - title: "Large Icon List with Simple Content"
      size: "lg"
      items:
        - icon: "help"
          icon_color: "text-blue"
          content: "<span class=\"text-bold\">Timing.</span> Is now the right time to start a business?"
        - icon: "help"
          icon_color: "text-blue"
          content: "<span class=\"text-bold\">Funding.</span> Do I have enough money to launch a business?"
        - icon: "help"
          icon_color: "text-blue"
          content: "<span class=\"text-bold\">Need.</span> Will this business fill a real need for my customers?"