{% unless settings.breadcrumb_styles == 'none' %}{% include 'breadcrumb' %}{% endunless %}

{% if section.blocks.size > 0 %}
  {% assign _layout = settings.general_placement %}

  <div class="page-portfolio layout-{{ _layout }}">

    <div id="col-main" class="page-portfolio-content">

      <div class="button-group filter-button-group{% if _layout == 'wide' %} container-fluid{% endif %}">
        {% assign _tag_list = section.settings.tag_list %}
        {% assign _tag_list = _tag_list | split: ';' %}
        <button data-filter="*">{{ 'general.pagination.all' | t }}</button>
        {% unless _tag_list == blank %}
          {% for tag in _tag_list %}
            <button data-filter=".{{ tag | downcase }}">{{ tag | capitalize }}</button>
          {% endfor %} 
        {% endunless %}   
      </div>

      <div class="portfolio-list portfolio-masonry">
        {% for block in section.blocks %}
          {%- assign _width = block.settings.width -%}
          {%- assign _image = block.settings.image -%}
          {%- assign _image_size = block.settings.image_size -%}
          {%- assign _image_title = block.settings.image_title -%}
          {%- assign _link = block.settings.link -%}
          {%- assign _filter_tag = block.settings.filter_tag -%}
          {%- assign _filter_tag =  _filter_tag | replace: ';', ' ' -%}

          <div class="portfolio-item width-{{ _width }}{% unless _filter_tag == blank %} {{ _filter_tag | downcase }}{% endunless %}">
            <div class="portfolio-image"><img src="{{ _image | img_url: _image_size }}"{% unless _image_title == blank %} alt="{{_image_title}}"{% endunless %} /></div>
            
            <div class="portfolio-title-link">
              {% unless _image_title == blank %}<div class="portfolio-title">{{ _image_title }}</div>{% endunless %}

              <div class="portfolio-link">
                <a href="{{ _link }}"><i class="demo-icon icon-link-2"></i></a>
                <a href="{{ _image | img_url: _image_size }}" rel="gallery" class="open-image fancybox" title="{{_image_title}}"><i class="demo-icon icon-plus"></i></a>
              </div>
            </div>
          </div>

        {% endfor %}
      </div>

    </div>
  </div>

  <script>
    jQuery(document).ready(function($){
      AT_Main.portfolio_filter();
    })
  </script>

{% endif %}

{% schema %}
  {
    "name": "Gallery Page",
	"max_blocks": 20,
	"settings": [
      {
        "type": "image_picker",
        "id": "breadcrumb_image",
        "label": "Breadcrumb image"
      },
      {
        "type":"text",
        "id":"tag_list",
        "label":"List of filter tags",
        "info":"Separate your tags with semicolon, eg: Auto;Racing;Parts;Fashion. If your tag has more than 2 words, use '-' to connect them, eg: Modern-Fashion",
        "default":"Auto;Racing;Parts;Fashion"
      }
    ],
    "blocks": [
      {
        "type": "image",
        "name": "Image",
        "settings": [
          {
            "type": "select",
            "id": "width",
            "label": "Width",
            "default": "33",
            "options": [
              {
                "value": "16",
                "label": "16%"
              },
              {
                "value": "20",
                "label": "20%"
              },
              {
                "value": "25",
                "label": "25%"
              },
              {
                "value": "33",
                "label": "33%"
              },
              {
                "value": "40",
                "label": "40%"
              },
              {
                "value": "50",
                "label": "50%"
              },
              {
                "value": "75",
                "label": "75%"
              },
              {
                "value": "100",
                "label": "100%"
              }
            ]
          },
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "text",
            "id": "image_size",
            "label": "Image size",
            "default": "380x380",
            "info": "For exam: 380x380 pixels"
          },
          {
            "type":"text",
            "id":"image_title",
            "label":"Image title"
          },
          {
            "type": "url",
            "id": "link",
            "label": "Link to"
          },
          {
            "type":"text",
            "id":"filter_tag",
            "label":"Filter tags",
            "info":"Separate your tags with semicolon, eg: Auto;Racing;Parts;Fashion. If your tag has more than 2 words, use '-' to connect them, eg: Modern-Fashion"
          }
        ]
      }
    ]
  }
{% endschema %}