<section class="pga-bio-blocks page-width padding-top-bottom" style="background-color: {{ section.settings.section_bg_color }};">
  {%- 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 'heading' %}
            <h2 style="font-size: {{ block.settings.heading_size }}px; color: {{ block.settings.heading_color }};">
              {{ block.settings.heading_text }}
            </h2>
          {% when 'description' %}
            <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">
              {% if block.settings.button_label != blank and block.settings.button_link != blank %}
              <a href="{{ block.settings.button_link }}" class="custom-btn">
                {{ block.settings.button_label }}
              </a>
            {% endif %}
            {% if block.settings.button_label2 != blank and block.settings.button_link2 != blank %}
              <a href="{{ block.settings.button_link2 }}" class="custom-btn">
                {{ block.settings.button_label2 }}
              </a>
            {% endif %}
            </div>
            {% endif %}
        {% 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;
  }
  .pga-description {
      line-height: 1.9;
  }
  .pga-description p {
    margin-bottom: 12px;
  }
  .pga-description a {
    color:#000;
    margin: 0 0 0 5px;
    text-decoration: none;
  }
  .pga-description a:hover {
    text-decoration: underline;
  }
  .pga-description li {
        margin-bottom: 10px;
    }
  .pga-bio-wrapper .buttons-group{
    display: flex;
    gap: 10px;
  }
  .pga-bio-wrapper .custom-btn {
      align-self: flex-start;
  }
  #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 Blocks",
  "class": "image-text-blocks-section padding-top-bottom",
  "settings": [
    {
      "type": "color",
      "id": "section_bg_color",
      "label": "Background Color"
    },
    {
      "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": "text",
          "id": "button_label2",
          "label": "Button Label"
        },
        {
          "type": "url",
          "id": "button_link2",
          "label": "Button Link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Image Text Blocks",
      "blocks": [{ "type": "image" }, { "type": "player_info" }, { "type": "heading" }, { "type": "description" }]
    }
  ]
}
{% endschema %}
