name: Info List
description: Displays Info List
type: particle
icon: fa-info-circle

form:
  fields:
    enabled:
      type: input.checkbox
      label: Enabled
      description: Globally enable the particle.
      default: true

    class:
      type: input.selectize
      label: CSS Classes
      description: CSS class name for the particle.

    title:
      type: input.text
      label: Title
      description: Customize the title text.
      placeholder: Enter title

    intro:
      type: textarea.textarea
      label: Intro
      description: Customize the intro text.
      placeholder: Enter short description

    cols:
      type: select.select
      label: Grid Column
      description: Select the grid column amount for the list items
      placeholder: 'Select...'
      default: g-1cols
      options:
        g-1cols: 1 Column
        g-2cols: 2 Columns
        g-3cols: 3 Columns
        g-4cols: 4 Columns
        g-5cols: 5 Columns

    infolists:
      type: collection.list
      array: true
      label: Info Lists
      description: Create each item to appear in the content row.
      value: title
      ajax: true

      fields:
        .title:
          type: input.text
          label: Item Title
          description: Customize the item title text.
          placeholder: Enter item title
        .date:
          type: input.date
          label: Event Date
          description: Set de event date
          placeholder: Enter the event date
        .time:
          type: input.time
          label: Event time
          description: Event time
          placeholder: Enter the event time
        .location:
          type: input.text
          label: Event Location
          description: Location of the event
          placeholder: Enter the event location 
        .image:
          type: input.imagepicker
          label: Image
          description: Select desired image.
        .image:
          type: input.imagepicker
          label: Image
          description: Select desired image.
        .imageloc:
          type: select.select
          label: Image Location
          description: Select the location for the image
          placeholder: 'Select...'
          default: left
          options:
            left: Left
            right: Right
        .textstyle:
          type: select.select
          label: Text Style
          description: Select the style for the text
          placeholder: 'Select...'
          default: compact
          options:
            compact: Compact
            large: Large
            bold: Bold
            header: Header
        .imagestyle:
          type: select.select
          label: Image Style
          description: Select the style for the image
          placeholder: 'Select...'
          default: compact
          options:
            compact: Compact
            large: Large
            browser: Browser
        .desc:
          type: textarea.textarea
          label: Description
          description: Customize the description.
          placeholder: Enter short description
        .tag:
          type: input.text
          label: Tag
          description: Customize the tag
          placeholder: Enter tag
        .subtag:
          type: input.text
          label: Sub Tag
          description: Customize the sub tag
          placeholder: Enter sub tag
        .label:
          type: input.text
          label: Label
          description: Customize the read more label
          placeholder: Enter read more label
        .link:
          type: input.text
          label: Link
          description: Specify the link address.
        .icon:
          type: input.icon
          label: Icon
          description: Specify the read more icon.
        .readmoreclass:
          type: input.selectize
          label: Read More Classes
          description: CSS class name for the read more.

{% for infolist in particle.infolists %}
      <div class="g-infolist-item {% if infolist.image %} g-infolist-with-img{% endif %}">
        
        {% set imagedata %}
        <div class="g-infolist-item-img g-block{% if infolist.imagestyle == 'compact' %} size-22 hidden-phone{% endif %}{% if infolist.imagestyle == 'browser' %} browser{% endif %} {{ infolist.imageloc|e }}">
          {% if infolist.imagestyle == 'browser' %}
          <div class="browser-wrapper">
            <div class="browser-bar">
              <span class="browser-button"></span>
            </div>
          {% endif %}
          <img src="{{ url(infolist.image)|e }}" alt="{{ url(infolist.title)|e }}" />
          {% if infolist.imagestyle == 'browser' %}
          </div>
          {% endif %}
        </div>
        {% endset %}
        
        {% if infolist.image and infolist.imageloc == 'left' %}
        {{ imagedata }}
        {% endif %}
        
        <div class="g-infolist-item-text{% if infolist.image %} g-block{% endif %} g-infolist-textstyle-{{ infolist.textstyle }}">
          {% if infolist.title %}
          <div class="g-infolist-item-title {% if infolist.textstyle == 'bold' %}g-bold{% endif %}">
            {% if infolist.textstyle == 'large' %}
            <div class="g-title-hero">
            {% endif %} 
            {% if infolist.link %}
            <a href="{{ infolist.link|e }}">
            {% endif %} 
              {{ infolist.title|raw }}
            {% if infolist.link %}
            </a>
            {% endif %} 
            {% if infolist.textstyle == 'large' %}
            </div>
            {% endif %}
          </div>
          {% endif %}
            
          {% if infolist.date %}
            <div class="g-infolist-item-date{% if infolist.image %} g-block{% endif %} g-infolist-textstyle-{{ infolist.textstyle }}">
            {{ infolist.date|date("m/d/Y") }}
            </div>
          {% endif %}
          
          {% if infolist.time %}
            <div class="g-infolist-item-time{% if infolist.image %} g-block{% endif %} g-infolist-textstyle-{{ infolist.textstyle }}">
             {{ infolist.time|raw }}
            </div>
          {% endif %}
          
          {% if infolist.location %}
             <div class="g-infolist-item-location{% if infolist.image %} g-block{% endif %} g-infolist-textstyle-{{ infolist.textstyle }}">
              {{ infolist.location|raw }}
             </div>
          {% endif %}
          
          {% if infolist.tag or infolist.subtag %}
          <div class="g-infolist-tags">
          {% if infolist.tag %}
            {% if infolist.link %}
            <a href="{{ infolist.link|e }}">
            {% endif %} 
              <span class="g-tag">{{ infolist.tag|e }}</span>
            {% if infolist.link %}
            </a>
            {% endif %} 
          {% endif %}