<div class="section-blog-articles container" {% render 'overwrite-theme-style', settings: section.settings %}>

    {%- if section.settings.title != blank -%}
        <h2 style="text-align: {{ section.settings.text_alignment }};">{{ section.settings.title }}</h2>
    {%- endif -%}

    {%- if section.settings.description != blank -%}
        <div style="text-align: {{ section.settings.text_alignment }};">{{ section.settings.description }}</div>
    {%- endif -%}
    
    <div class="section-blog-articles-content {% if section.blocks.size < 3 %}section-blog-articles-content-{{ section.blocks.size }}{% endif %}">
        {%- for block in section.blocks -%}
            <div class="section-blog-articles-article">
                {% render 'image', image: block.settings.article.image %}

                <a href="{{ block.settings.article.url }}" class="no-link-style">
                    <h3 {% render 'overwrite-theme-style', font_size: section.settings.heading_font_size, text_color: section.settings.heading_text_color %}>{{ block.settings.article.title }}</h3>
                    <span class="article-date-and-author">
                        {%- assign date_format = 'general.article.article_published_date_format_day_month_year' | t -%}
                        {% if block.settings.article.author %}{{ block.settings.article.author }}{% endif %}, {{ block.settings.article.published_at | date: date_format }}
                    </span>
                    {%- if section.settings.show_read_duration -%}
                        <span {% render 'overwrite-theme-style', font_size: section.settings.read_font_size, text_color: section.settings.read_text_color %}>
                            {% assign words = block.settings.article.content | strip_html | strip_newlines | split: ' ' | size %}

                            {% if words < 360 %}
                                1 Minute lesen
                            {% else %}
                                {{ words | divided_by: 180 }} Minuten lesen
                            {% endif %}
                        </span>
                    {%- endif -%}

                    <p {% render 'overwrite-theme-style', font_size: section.settings.font_size, text_color: section.settings.text_color %}>{{ block.settings.article.content | strip_html | slice: 0, 160 }}...</p>
                </a>
            </div>
        {% endfor %}
    </div>

    {%- if section.settings.show_blog_button -%}
        <div class="section-blog-articles-button">
            <a href="{{ section.settings.blog_button_url }}" class="btn">{{ section.settings.blog_button_text }}</a>
        </div>
    {%- endif -%}

</div>

{% schema %}
{
    "name": "t:sections.section-blog-articles.name",
    "settings": [
        {
            "type": "richtext",
            "id": "title",
            "label": "t:sections.section-blog-articles.settings.title"
        },
        {
            "type": "richtext",
            "id": "description",
            "label": "t:sections.section-blog-articles.settings.description"
        },
        {
            "type": "header",
            "content": "t:sections.section-blog-articles.settings.blog_button"
        },
        {
            "type": "checkbox",
            "id": "show_blog_button",
            "default": true,
            "label": "t:sections.section-blog-articles.settings.show_blog_button"
        },
        {
            "type": "text",
            "id": "blog_button_text",
            "label": "t:sections.section-blog-articles.settings.blog_button_text"
        },
        {
            "type": "url",
            "id": "blog_button_url",
            "label": "t:sections.section-blog-articles.settings.blog_button_url"
        },
        {
            "type": "header",
            "content": "t:sections.general.settings"
        },
        {
            "type": "select",
            "id": "text_alignment",
            "default": "left",
            "label": "t:sections.section-blog-articles.settings.text_alignment",
            "options": [
                {
                    "value": "left",
                    "label": "t:sections.section-blog-articles.settings.text_alignment_left"
                },
                {
                    "value": "center",
                    "label": "t:sections.section-blog-articles.settings.text_alignment_center"
                },
                {
                    "value": "right",
                    "label": "t:sections.section-blog-articles.settings.text_alignment_right"
                }
            ]
        },
        {
            "type": "checkbox",
            "id": "show_read_duration",
            "default": true,
            "label": "t:sections.section-blog-articles.settings.show_read_duration"
        },
        {
            "type": "header",
            "content": "t:sections.general.margin"
        },
        {
            "type": "range",
            "id": "overwrite_theme_margin_top",
            "label": "t:sections.section-blog-articles.settings.overwrite_theme_margin_top",
            "min": -50,
            "max": 50,
            "step": 1,
            "unit": "px",
            "default": 0
        },
        {
            "type": "range",
            "id": "overwrite_theme_margin_bottom",
            "label": "t:sections.section-blog-articles.settings.overwrite_theme_margin_bottom",
            "min": -50,
            "max": 50,
            "step": 1,
            "unit": "px",
            "default": 0
        },
        {
            "type": "header",
            "content": "t:sections.general.theme-settings.content",
            "info": "t:sections.general.theme-settings.info"
        },
        {
            "type": "color",
            "id": "heading_text_color",
            "label": "t:sections.section-blog-articles.settings.heading_text_color",
            "info": "t:sections.section-blog-articles.settings.heading_text_color_info"
        },
        {
            "type": "range",
            "id": "heading_font_size",
            "label": "t:sections.section-blog-articles.settings.heading_font_size",
            "min": 0,
            "max": 50,
            "step": 1,
            "unit": "px",
            "default": 0,
            "info": "t:sections.section-blog-articles.settings.heading_font_size_info"
        },
        {
            "type": "color",
            "id": "read_text_color",
            "label": "t:sections.section-blog-articles.settings.read_text_color",
            "info": "t:sections.section-blog-articles.settings.read_text_color_info"
        },
        {
            "type": "range",
            "id": "read_font_size",
            "label": "t:sections.section-blog-articles.settings.read_font_size",
            "min": 0,
            "max": 50,
            "step": 1,
            "unit": "px",
            "default": 0,
            "info": "t:sections.section-blog-articles.settings.read_font_size_info"
        },
        {
            "type": "color",
            "id": "text_color",
            "label": "t:sections.section-blog-articles.settings.text_color",
            "info": "t:sections.section-blog-articles.settings.text_color_info"
        },
        {
            "type": "range",
            "id": "font_size",
            "label": "t:sections.section-blog-articles.settings.font_size",
            "min": 0,
            "max": 50,
            "step": 1,
            "unit": "px",
            "default": 0,
            "info": "t:sections.section-blog-articles.settings.font_size_info"
        }
    ],
    "blocks": [
        {
            "type": "article",
            "name": "t:sections.section-blog-articles.blocks.article.name",
            "settings": [
                {
                    "type": "article",
                    "id": "article",
                    "label": "t:sections.section-blog-articles.blocks.article.settings.article"
                }
            ]
        }
    ],
    "presets": [
        {
            "name": "t:sections.section-blog-articles.name"
        }
    ]
}
{% endschema %}