{#
    About page - "Philosophie" section (full-width gradient band, founder quote)

    Parameters:
    - content (array): raw locale content, `philosophieText`/`philosophieImage`/
      `philosophieAuthorName`/`philosophieAuthorRole` fields
    - editMode (bool)
#}
<section class="about-philosophie">
    <p class="about-philosophie__title">Philosophie</p>

    <div class="about-philosophie__row">
        <div class="about-philosophie__image{% if editMode|default(false) and not (content.philosophieImage|default(false) or content.philosophieImageDark|default(false)) %} is-empty-image{% endif %}"{{ image_frame_attrs(content|default({}), 'philosophieImage', editMode|default(false)) }}{% if editMode|default(false) %}
            data-editable-image="true"
            data-field="philosophieImage"
            data-media-id="{{ content.philosophieImage|default('') }}" data-media-id-dark="{{ content.philosophieImageDark|default('') }}"{% endif %}>
            {% if editMode|default(false) and not (content.philosophieImage|default(false) or content.philosophieImageDark|default(false)) %}
                <span class="editable-image__placeholder">
                    <span class="editable-image__placeholder-icon">+</span>
                    <span class="editable-image__placeholder-label">Ajouter une image</span>
                </span>
            {% endif %}
            {% include 'components/_themed_img.html.twig' with {light: philosophieImagePath|default(''), dark: philosophieImageDarkPath|default(''), alt: '', class: 'about-philosophie__img'} only %}
        </div>

        <div class="about-philosophie__col">
            <span class="about-philosophie__divider" aria-hidden="true"></span>

            <div class="about-philosophie__content">
                {% if (content.philosophieText is defined and content.philosophieText) or editMode|default(false) %}
                    <div class="about-philosophie__quote"{% if editMode|default(false) %} data-editable="true" data-field="philosophieText" data-placeholder="Citation"{% endif %}>{{ content.philosophieText|default('')|raw }}</div>
                {% endif %}

                <div class="about-philosophie__author">
                    {% if (content.philosophieAuthorName is defined and content.philosophieAuthorName) or editMode|default(false) %}
                        <p class="about-philosophie__author-name"{% if editMode|default(false) %} data-editable="true" data-editor-type="simple" data-field="philosophieAuthorName" data-placeholder="Nom"{% endif %}>{{ content.philosophieAuthorName|default('') }}</p>
                    {% endif %}
                    {% if (content.philosophieAuthorRole is defined and content.philosophieAuthorRole) or editMode|default(false) %}
                        <p class="about-philosophie__author-role"{% if editMode|default(false) %} data-editable="true" data-editor-type="simple" data-field="philosophieAuthorRole" data-placeholder="Fonction"{% endif %}>{{ content.philosophieAuthorRole|default('') }}</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</section>