<section class="pga-bio-blocks page-width">
  {%- if section.settings.section_heading != blank -%}
    <div class="pga-section-heading">
      <h2>{{ section.settings.section_heading }}</h2>
    </div>
  {%- endif -%}
  <div class="pga-bio-wrapper">
    <div class="pga-left" style="flex: 0 0 {{ section.settings.left_col_width }}%;">
      {% for block in section.blocks %}
        {% case block.type %}
          {% when 'image' %}
            {% if block.settings.image != blank %}
              <img src="{{ block.settings.image | img_url: '600x' }}" alt="Player Image" class="pga-image">
            {% endif %}
          {% when 'player_info' %}
            <div class="pga-info">
              <div class="pga-description">
                {{ block.settings.desc }}
              </div>
            </div>
        {% endcase %}
      {% endfor %}
    </div>

    <div
      class="pga-right"
      style="flex: 1; text-align: {{ section.settings.text_align_h }}; justify-content: {{ section.settings.text_align_v }};"
    >
      {% for block in section.blocks %}
        {% case block.type %}
          {% when 'description' %}
            <div class="pga-description-wrapper">
              <h2 style="font-size: {{ block.settings.heading_size }}px; color: {{ block.settings.heading_color }};">
                {{ block.settings.heading_text }}
              </h2>
              <div class="pga-description">
                {{ block.settings.desc }}
              </div>
              {% if block.settings.save_heading != blank %}
                <h3 style="color: red; font-weight: bold;">
                  {{ block.settings.save_heading }}
                </h3>
              {% endif %}
              {% if block.settings.button_label != blank and block.settings.button_link != blank %}
                <div class="buttons-group">
                  <a href="{{ block.settings.button_link }}" class="custom-btn">
                    {{ block.settings.button_label }}
                  </a>
                </div>
              {% endif %}
            </div>

          {% when 'description_alt' %}
            <div class="description_alt-wrapper">
              <div class="pga-description">
                {{ block.settings.desc }}
              </div>
              {% if block.settings.save_heading != blank %}
                <h3 style="color: red; font-weight: bold;">
                  {{ block.settings.save_heading }}
                </h3>
              {% endif %}
              {% if block.settings.button_label != blank and block.settings.button_link != blank %}
                <div class="buttons-group">
                  <a href="{{ block.settings.button_link }}" class="custom-btn">
                    {{ block.settings.button_label }}
                  </a>
                </div>
              {% endif %}
            </div>
        {% endcase %}
      {% endfor %}
    </div>
  </div>
</section>

<style>
    .pga-bio-wrapper {
      display: flex;
      gap: 30px;
    }
    .pga-left img {
      width: 100%;
      max-width: 100%;
      margin-bottom: 15px;
    }
    .pga-info p {
      margin: 4px 0;
    }
    .pga-right {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .pga-description {
        line-height: 1.9;
    }
    .pga-description p {
      margin-bottom: 12px;
    }
    .pga-description a {
      color:#000;
      margin: 0 0 0 5px;
    }
    .pga-description li {
      margin-bottom: 10px;
    }
    .pga-bio-wrapper .buttons-group{
      display: flex;
      gap: 10px;
    }
  .pga-bio-wrapper .custom-btn {
        align-self: flex-start;
    }
    .image-text-two-blocks-section .pga-right {
    flex-direction: row;
}
    #shopify-section-{{ section.id }}.padding-top-bottom{
      padding-top: {{ section.settings.topMargin }}px;
      padding-bottom: {{ section.settings.bottomMargin }}px;
      background-color: {{ section.settings.section_bg_color }};
    }
    @media (max-width: 767px) {
      #shopify-section-{{ section.id }}.padding-top-bottom{
          padding-top: {{ section.settings.topMarginMobile }}px;
          padding-bottom: {{ section.settings.bottomMarginMobile }}px;
      }
      .pga-bio-wrapper {
        flex-direction: column;
      }
      .pga-left,
      .pga-right {
        flex: 1 1 100%;
      }
    }
</style>

{% schema %}
{
  "name": "Image Text 2 Blocks",
  "class": "image-text-two-blocks-section padding-top-bottom",
  "settings": [
    {
      "type": "text",
      "id": "section_heading",
      "label": "Section Heading"
    },
    {
      "type": "range",
      "id": "left_col_width",
      "label": "Left Column Width (%)",
      "min": 20,
      "max": 80,
      "default": 40
    },
    {
      "type": "select",
      "id": "text_align_h",
      "label": "Text Horizontal Alignment",
      "default": "left",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "right", "label": "Right" }
      ]
    },
    {
      "type": "select",
      "id": "text_align_v",
      "label": "Text Vertical Alignment",
      "default": "center",
      "options": [
        { "value": "flex-start", "label": "Top" },
        { "value": "center", "label": "Center" },
        { "value": "flex-end", "label": "Bottom" }
      ]
    },
    {
      "type": "header",
      "content": "Section margin"
    },
    {
      "type": "range",
      "id": "topMargin",
      "label": "Top Padding",
      "min": 0,
      "max": 100,
      "step": 1,
      "default": 50,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "bottomMargin",
      "label": "Bottom Padding",
      "min": 0,
      "max": 100,
      "step": 1,
      "default": 50,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "topMarginMobile",
      "label": "Mobile Top Padding",
      "min": 0,
      "max": 80,
      "step": 1,
      "default": 30,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "bottomMarginMobile",
      "label": "Mobile Bottom Padding",
      "min": 0,
      "max": 80,
      "step": 1,
      "default": 30,
      "unit": "px"
    }
  ],
  "blocks": [
    {
      "type": "image",
      "name": "Image",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        }
      ]
    },
    {
      "type": "player_info",
      "name": "Player Info",
      "settings": [
        {
          "type": "richtext",
          "id": "desc",
          "label": "Richtext"
        }
      ]
    },
    {
      "type": "heading",
      "name": "Heading",
      "settings": [
        {
          "type": "text",
          "id": "heading_text",
          "label": "Heading Text",
          "default": "2024 PGA Championship"
        },
        {
          "type": "range",
          "id": "heading_size",
          "label": "Font Size (px)",
          "min": 16,
          "max": 60,
          "default": 28
        },
        {
          "type": "color",
          "id": "heading_color",
          "label": "Font Color",
          "default": "#000000"
        }
      ]
    },
    {
      "type": "description",
      "name": "Description",
      "settings": [
        {
          "type": "richtext",
          "id": "desc",
          "label": "Richtext"
        },
        {
          "type": "text",
          "id": "save_heading",
          "label": "Save Heading"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "Button Label"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button Link"
        }
      ]
    },
    {
      "type": "description_alt",
      "name": "Description (Alt)",
      "settings": [
        {
          "type": "richtext",
          "id": "desc",
          "label": "Richtext"
        },
        {
          "type": "text",
          "id": "save_heading",
          "label": "Save Heading"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "Button Label"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button Link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Image Text 2 Blocks",
      "blocks": [
        { "type": "image" },
        { "type": "player_info" },
        { "type": "heading" },
        { "type": "description" },
        { "type": "description_alt" }
      ]
    }
  ]
}
{% endschema %}
