{% doc %}
  @prompt
    A magazine-style editorial layout, typography should inherit shopify theme fonts. pull list of existing blogs from shopify., remove the tree branch icon from the link

{% enddoc %}
{% assign ai_gen_id = block.id | replace: '_', '' | downcase %}

{% style %}
  .ai-editorial-layout-{{ ai_gen_id }} {
    max-width: 1200px;
    margin: 0 auto;
    padding: {{ block.settings.section_padding }}px;
    background-color: {{ block.settings.background_color }};
    font-family: var(--font-body-family);
  }

  .ai-editorial-grid-{{ ai_gen_id }} {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: {{ block.settings.grid_gap }}px;
    margin-bottom: {{ block.settings.content_spacing }}px;
  }

  .ai-editorial-main-{{ ai_gen_id }} {
    position: relative;
  }

  .ai-editorial-main-image-{{ ai_gen_id }} {
    width: 100%;
    height: {{ block.settings.main_image_height }}px;
    object-fit: cover;
    border-radius: {{ block.settings.border_radius }}px;
  }

  .ai-editorial-main-placeholder-{{ ai_gen_id }} {
    width: 100%;
    height: {{ block.settings.main_image_height }}px;
    background-color: #f4f4f4;
    border-radius: {{ block.settings.border_radius }}px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .ai-editorial-main-placeholder-{{ ai_gen_id }} svg {
    width: 100%;
    height: 100%;
    max-width: 200px;
    max-height: 200px;
    opacity: 0.3;
  }

  .ai-editorial-empty-state-{{ ai_gen_id }} {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #666;
    font-size:14px;
    text-align: center;
  }

  .ai-editorial-main-content-{{ ai_gen_id }} {
    margin-top: {{ block.settings.content_spacing }}px;
  }

  .ai-editorial-category-{{ ai_gen_id }} {
    display: inline-block;
    background-color: {{ block.settings.category_bg_color }};
    color: {{ block.settings.category_text_color }};
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 3px;
    margin-bottom:12px;
  }

  .ai-editorial-main-title-{{ ai_gen_id }} {
    font-family: var(--font-heading-family);
    font-size: {{ block.settings.main_title_size }}px;
    font-weight: var(--font-heading-weight);
    line-height: 1.2;
    color: {{ block.settings.text_color }};
    margin: 0 0 16px 0;
  }

  .ai-editorial-main-excerpt-{{ ai_gen_id }} {
    font-size: {{ block.settings.excerpt_size }}px;
    line-height: 1.6;
    color: {{ block.settings.secondary_text_color }};
    margin-bottom: 20px;
  }

  .ai-editorial-meta-{{ ai_gen_id }} {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    color: {{ block.settings.meta_text_color }};
  }

  .ai-editorial-author-{{ ai_gen_id }} {
    font-weight: 500;
  }

  .ai-editorial-date-{{ ai_gen_id }} {
    opacity: 0.8;
  }

  .ai-editorial-sidebar-{{ ai_gen_id }} {
    display: flex;
    flex-direction: column;
    gap: {{ block.settings.sidebar_spacing }}px;
  }

  .ai-editorial-sidebar-item-{{ ai_gen_id }} {
    display: flex;
    gap: 16px;
    padding-bottom: {{ block.settings.sidebar_spacing }}px;
    border-bottom: 1px solid {{ block.settings.border_color }};
  }

  .ai-editorial-sidebar-item-{{ ai_gen_id }}:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .ai-editorial-sidebar-image-{{ ai_gen_id }} {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: {{ block.settings.border_radius }}px;
  }

  .ai-editorial-sidebar-placeholder-{{ ai_gen_id }} {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    background-color: #f4f4f4;
    border-radius: {{ block.settings.border_radius }}px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ai-editorial-sidebar-placeholder-{{ ai_gen_id }} svg {
    width: 30px;
    height: 30px;
    opacity: 0.3;
  }

  .ai-editorial-sidebar-content-{{ ai_gen_id }} {
    flex: 1;}

  .ai-editorial-sidebar-category-{{ ai_gen_id }} {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: {{ block.settings.category_bg_color }};
    margin-bottom: 6px;
  }

  .ai-editorial-sidebar-title-{{ ai_gen_id }} {
    font-family: var(--font-heading-family);
    font-size: {{ block.settings.sidebar_title_size }}px;
    font-weight: var(--font-heading-weight);
    line-height: 1.3;
    color: {{ block.settings.text_color }};
    margin: 0 0 8px 0;
  }

  .ai-editorial-sidebar-meta-{{ ai_gen_id }} {
    font-size: 12px;
    color: {{ block.settings.meta_text_color }};
    opacity: 0.8;
  }

  .ai-editorial-read-more-{{ ai_gen_id }} {
    display: inline-block;
    color: {{ block.settings.link_color }};
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    margin-top: 16px;
    transition: color 0.3s ease;
  }

  .ai-editorial-read-more-{{ ai_gen_id }}:hover {
    color: {{ block.settings.link_hover_color }};
  }

  @media screen and (max-width: 768px) {
    .ai-editorial-layout-{{ ai_gen_id }} {
      padding: {{ block.settings.section_padding | times: 0.6}}px;
    }

    .ai-editorial-grid-{{ ai_gen_id }} {
      grid-template-columns: 1fr;
      gap: {{ block.settings.content_spacing }}px;
    }

    .ai-editorial-main-image-{{ ai_gen_id }},
    .ai-editorial-main-placeholder-{{ ai_gen_id }} {
      height: {{ block.settings.main_image_height | times: 0.7}}px;
    }

    .ai-editorial-main-title-{{ ai_gen_id }} {
      font-size: {{ block.settings.main_title_size | times: 0.8 }}px;
    }

    .ai-editorial-sidebar-{{ ai_gen_id }} {
      margin-top: {{ block.settings.content_spacing }}px;
    }

    .ai-editorial-sidebar-item-{{ ai_gen_id }} {
      gap: 12px;
    }

    .ai-editorial-sidebar-image-{{ ai_gen_id }},
    .ai-editorial-sidebar-placeholder-{{ ai_gen_id }} {
      width: 60px;
      height: 60px;
    }
  }
{% endstyle %}<div class="ai-editorial-layout-{{ ai_gen_id }}" {{ block.shopify_attributes }}>
  <div class="ai-editorial-grid-{{ ai_gen_id }}">
    <article class="ai-editorial-main-{{ ai_gen_id }}">
      {% if block.settings.featured_blog != blank and block.settings.featured_blog.articles.size > 0 %}
        {% assign featured_article = block.settings.featured_blog.articles.first %}
        {% if featured_article.image %}
          <img
            src="{{ featured_article.image | image_url: width: 800 }}"
            alt="{{ featured_article.image.alt | escape }}"
            class="ai-editorial-main-image-{{ ai_gen_id }}"
            loading="lazy"
            width="{{ featured_article.image.width }}"
            height="{{ featured_article.image.height }}"
          >
        {% else %}
          <div class="ai-editorial-main-placeholder-{{ ai_gen_id }}">
            {{ 'hero-apparel-1' | placeholder_svg_tag }}
          </div>
        {% endif %}

        <div class="ai-editorial-main-content-{{ ai_gen_id }}">
          {% if block.settings.show_category and featured_article.tags.size > 0 %}
            <span class="ai-editorial-category-{{ ai_gen_id }}">{{ featured_article.tags.first }}</span>
          {% endif %}

          <h1 class="ai-editorial-main-title-{{ ai_gen_id }}">{{ featured_article.title }}</h1>

          {% if block.settings.show_excerpt and featured_article.excerpt != blank %}
            <div class="ai-editorial-main-excerpt-{{ ai_gen_id }}">{{ featured_article.excerpt | strip_html | truncate: 200 }}</div>
          {% endif %}

          <div class="ai-editorial-meta-{{ ai_gen_id }}">
            {% if block.settings.show_author and featured_article.author != blank %}
              <span class="ai-editorial-author-{{ ai_gen_id }}">By {{ featured_article.author }}</span>
            {% endif %}
            {% if block.settings.show_date %}
              <span class="ai-editorial-date-{{ ai_gen_id }}">{{ featured_article.published_at | date: '%B %d, %Y' }}</span>
            {% endif %}
          </div>

          <a href="{{ featured_article.url }}" class="ai-editorial-read-more-{{ ai_gen_id }}">
            Finish the Statement →
          </a>
        </div>
      {% else %}
        <div class="ai-editorial-main-placeholder-{{ ai_gen_id }}">
          {{ 'hero-apparel-1' | placeholder_svg_tag }}
          <div class="ai-editorial-empty-state-{{ ai_gen_id }}">
            Select a blog to display featured articles
          </div>
        </div>
      {% endif %}
    </article>

    <aside class="ai-editorial-sidebar-{{ ai_gen_id }}">
      {% if block.settings.sidebar_blog != blank and block.settings.sidebar_blog.articles.size > 0 %}
        {% assign sidebar_articles = block.settings.sidebar_blog.articles | limit: 4 %}
        {% for article in sidebar_articles %}
          <article class="ai-editorial-sidebar-item-{{ ai_gen_id }}">
            {% if article.image %}
              <img
                src="{{ article.image | image_url: width: 160 }}"
                alt="{{ article.image.alt | escape }}"
                class="ai-editorial-sidebar-image-{{ ai_gen_id }}"
                loading="lazy"
                width="{{ article.image.width }}"
                height="{{ article.image.height }}"
              >
            {% else %}
              <div class="ai-editorial-sidebar-placeholder-{{ ai_gen_id }}">
                {{ 'image' | placeholder_svg_tag }}
              </div>
            {% endif %}

            <div class="ai-editorial-sidebar-content-{{ ai_gen_id }}">
              {% if block.settings.show_sidebar_category and article.tags.size > 0 %}
                <div class="ai-editorial-sidebar-category-{{ ai_gen_id }}">{{ article.tags.first }}</div>
              {% endif %}

              <a href="{{ article.url }}" style="text-decoration: none; color: inherit;">
                <h3 class="ai-editorial-sidebar-title-{{ ai_gen_id }}">{{ article.title }}</h3>
              </a>

              {% if block.settings.show_sidebar_meta %}
                <div class="ai-editorial-sidebar-meta-{{ ai_gen_id }}">
                  {% if block.settings.show_sidebar_author and article.author != blank %}{{ article.author }}{% endif %}
                  {% if block.settings.show_sidebar_author and article.author != blank and block.settings.show_sidebar_date %} • {% endif %}
                  {% if block.settings.show_sidebar_date %}{{ article.published_at | date: '%b %d, %Y' }}{% endif %}
                </div>
              {% endif %}
            </div>
          </article>
        {% endfor %}
      {% else %}
        {% for i in (1..4) %}
          <article class="ai-editorial-sidebar-item-{{ ai_gen_id }}">
            <div class="ai-editorial-sidebar-placeholder-{{ ai_gen_id }}">
              {{ 'image' | placeholder_svg_tag }}
            </div>
            <div class="ai-editorial-sidebar-content-{{ ai_gen_id }}">
              <div class="ai-editorial-sidebar-category-{{ ai_gen_id }}">Category</div>
              <h3 class="ai-editorial-sidebar-title-{{ ai_gen_id }}">Sample Article Title {{ i }}</h3>
              <div class="ai-editorial-sidebar-meta-{{ ai_gen_id }}">Author • Date</div>
            </div>
          </article>
        {% endfor %}
      {% endif %}
    </aside>
  </div>
</div>

{% schema %}
{
  "name": "Magazine editorial layout",
  "settings": [
    {
      "type": "header",
      "content": "Content"
    },
    {
      "type": "blog",
      "id": "featured_blog",
      "label": "Featured blog"
    },
    {
      "type": "blog",
      "id": "sidebar_blog",
      "label": "Sidebar blog"
    },
    {
      "type": "header",
      "content": "Featured article display"
    },
    {
      "type": "checkbox",
      "id": "show_category",
      "label": "Show category",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_excerpt",
      "label": "Show excerpt",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_author",
      "label": "Show author",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_date",
      "label": "Show date",
      "default": true
    },
    {
      "type": "header",
      "content": "Sidebar articles display"
    },
    {
      "type": "checkbox",
      "id": "show_sidebar_category",
      "label": "Show category",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_sidebar_meta",
      "label": "Show meta information",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_sidebar_author",
      "label": "Show author",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "show_sidebar_date",
      "label": "Show date",
      "default": true
    },
    {
      "type": "header",
      "content": "Colors"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Text",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "secondary_text_color",
      "label": "Secondary text",
      "default": "#666666"
    },
    {
      "type": "color",
      "id": "meta_text_color",
      "label": "Meta text",
      "default": "#999999"
    },
    {
      "type": "color",
      "id": "category_bg_color",
      "label": "Category background",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "category_text_color",
      "label": "Category text",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "border_color",
      "label": "Border",
      "default": "#e5e5e5"
    },
    {
      "type": "color",
      "id": "link_color",
      "label": "Link",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "link_hover_color",
      "label": "Link hover",
      "default": "#666666"
    },
    {
      "type": "header",
      "content": "Layout"
    },
    {
      "type": "range",
      "id": "section_padding",
      "min": 20,
      "max": 80,
      "step": 4,
      "unit": "px",
      "label": "Section padding",
      "default": 40
    },
    {
      "type": "range",
      "id": "grid_gap",
      "min": 20,
      "max": 60,
      "step": 4,
      "unit": "px",
      "label": "Grid gap",
      "default": 40
    },
    {
      "type": "range",
      "id": "content_spacing",
      "min": 16,
      "max": 40,
      "step": 4,
      "unit": "px",
      "label": "Content spacing",
      "default": 24
    },
    {
      "type": "range",
      "id": "sidebar_spacing",
      "min": 16,
      "max": 32,
      "step": 4,
      "unit": "px",
      "label": "Sidebar spacing",
      "default": 20
    },
    {
      "type": "range",
      "id": "border_radius",
      "min": 0,
      "max": 16,
      "step": 2,
      "unit": "px",
      "label": "Border radius",
      "default": 8
    },
    {
      "type": "header",
      "content": "Typography sizes"
    },
    {
      "type": "range",
      "id": "main_title_size",
      "min": 24,
      "max": 48,
      "step": 2,
      "unit": "px",
      "label": "Main title size",
      "default": 36
    },
    {
      "type": "range",
      "id": "excerpt_size",
      "min": 14,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Excerpt size",
      "default": 16
    },
    {
      "type": "range",
      "id": "sidebar_title_size",
      "min": 14,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "Sidebar title size",
      "default": 16
    },
    {
      "type": "range",
      "id": "main_image_height",
      "min": 300,
      "max": 600,
      "step": 20,
      "unit": "px",
      "label": "Main image height",
      "default": 400
    }
  ],
  "presets": [
    {
      "name": "Magazine editorial layout"
    }
  ]
}
{% endschema %}