{% sw_extends '@Storefront/storefront/page/product-detail/headline.html.twig'  %}

{% block page_product_detail_headline_inner %}
    {% block page_product_detail_name_container %}
        <div class="col product-detail-name-container flex-column-reverse align-items-start">
            {% block page_product_detail_name %}
                <h1 class="product-detail-name"
                    itemprop="name">
                    {{ page.product.translated.name }}
                </h1>
                <div class="mb-3"><b>{{ page.product.manufacturer.translated.name }} · {{ page.product.productNumber }}</b></div>
            {% endblock %}
        </div>
    {% endblock %}

    {% block page_product_detail_manufacturer %}
        {% if page.product.manufacturer %}
            <div class="col-md-auto product-detail-manufacturer">
                {% block page_product_detail_manufacturer_inner %}
                    {% block page_product_detail_manufacturer_link %}
                        <a href="{{ page.product.manufacturer.link }}"
                           class="product-detail-manufacturer-link"
                           rel="noreferrer noopener"
                           target="_blank"
                           title="{{ page.product.manufacturer.translated.name }}">
                            {% if page.product.manufacturer.media %}
                                {% block page_product_detail_manufacturer_logo %}
                                    <img src="{{ page.product.manufacturer.media|sw_encode_media_url }}"
                                         class="product-detail-manufacturer-logo"
                                         alt="{{ page.product.manufacturer.translated.name }}" width="100%"/>
                                {% endblock %}
                            {% else %}
                                {% block page_product_detail_manufacturer_text %}
                                    {{ page.product.manufacturer.translated.name }}
                                {% endblock %}
                            {% endif %}
                        </a>
                    {% endblock %}
                {% endblock %}
            </div>
        {% endif %}
    {% endblock %}
{% endblock %}
