{% extends 'main_base.html.twig' %}
{% block title %}{{ entity.title }}{% endblock %}
{% block description %}{{ entity.description }}{% endblock %}
{% block content %}
    {% set banner = sayfa.blog.banner %}
    {% set bannerPath = asset('uploads/blog/banner/') %}
    {% if banner is null %}
        {% set banner = 'blog-banner.png' %}
        {% set bannerPath = asset('assets/main/img/') %}
    {% endif %}

    <div class="page_head" id="surdurulebilirlik-banner" style="background-image: url('{{ bannerPath~banner }}')">
        <h1 class="page-title animate__animated animate__flipInX">{{ 'blog'|trans }}</h1>
        <div class="tree animate__animated animate__slideInDown">
            <a href="{{ path('app_main_default') }}">{{ 'home'|trans }} </a>
            <span>/</span>
            <a href="{{ path('app_main_blog') }}">{{ 'blog'|trans }}</a>
            <span>/</span>
            <a href="javascript:void(0);" class="activetree">{{ entity.baslik }}</a>
        </div>
        {#<div class="innerPage-banner-img-hiz">
            <img src="{{ asset('assets/main/img/cert.png') }}" alt="">
        </div>#}
    </div>
    <div class="container">
        <div class="haber">
            {% if oncekiYazi %}
                <div class="me-auto haber-geri">
                    <span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"
                             viewBox="0 0 24 24" stroke-width="1" stroke="#000"
                             stroke-linecap="round" stroke-linejoin="round"
                             class="icon icon-tabler icon-tabler-chevron-right"
                             fill="none" style="transform: rotate(180deg)">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <polyline points="9 6 15 12 9 18"/>
                        </svg>
                    </span>
                    <a href="{{ path('app_main_blog_detay', {'link': oncekiYazi.link}) }}">{{ 'prev_blog'|trans }}</a>
                </div>
            {% endif %}
            {% if sonrakiYazi %}
                <div class="ms-auto haber-devam">
                    <a href="{{ path('app_main_blog_detay', {'link': sonrakiYazi.link}) }}">{{ 'next_blog'|trans }}
                        <span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"
                             viewBox="0 0 24 24" stroke-width="1" stroke="#000"
                             stroke-linecap="round" stroke-linejoin="round"
                             class="icon icon-tabler icon-tabler-chevron-right"
                             fill="none">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <polyline points="9 6 15 12 9 18"/>
                        </svg>
                    </span>
                    </a>
                </div>
            {% endif %}
        </div>
        <div class="page-icerik page-detay">
            <div id="tabs">
                <div class="row">
                    <div class="col-md-6 medya-detay-image">
                        <div class="slides">
                            {% set yaziResimler = entity.yazi.resimler|filter(r => r.del == 0) %}
                            {% if yaziResimler|length > 0 %}
                                <img src="{{ asset('uploads/blog/'~yaziResimler|first.resim) }}" alt="{{ entity.baslik }}">
                            {% else %}
                                <img src="{{ asset('assets/main/img/blog-kapak.jpeg') }}" alt="Askon">
                            {% endif %}
                        </div>
                    </div>
                    <div class="col-md-6 medya-detay-text">
                        <div>
                            <div class="hizmet-swiper-title">{{ entity.baslik }}</div>
                            <div class="hizmet-swiper-text medya-detail-text">{{ entity.metin|raw }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="temizle"></div>
    </div>
{% endblock %}

{% block pageScript %}
    <script>
        $(".header-link[data-path='blog']").addClass("active");
    </script>
{% endblock %}