{#
    About page - "Savoir faire" section (full-width dark band, 5 skill labels + link)

    Note on skill count: the Figma design (node 92:1278) only shows 5 skill labels in the
    grid (3 on the first row, 2 on the second) — not 6 as initially assumed. See task notes.

    Parameters:
    - content (array): raw locale content, `skillLabel1..5`/`savoirFaireLinkLabel`/
      `savoirFaireLinkHref` fields
    - editMode (bool)
#}
<section class="about-savoir-faire">
	<div class="container">
		<div class="about-savoir-faire__header">
			<p class="about-savoir-faire__title">Savoir faire</p>

			{% set linkLabel = content.savoirFaireLinkLabel|default('') %}
			{% if (content.savoirFaireLinkHref is defined and content.savoirFaireLinkHref and linkLabel) or editMode|default(false) %}
				{% set linkContent %}
				<span class="link-btn__label{% if not linkLabel %} is-empty{% endif %}" data-label-target="true">{{ linkLabel|default('Label du lien') }}</span>
				{% include 'components/_icon.html.twig' with {name: 'arrow-right', width: '14px', height: '12px', class: 'about-savoir-faire__link-icon'} only %}
				{% endset %}
				{{ include('components/_button.html.twig', editMode|default(false) ? {
                href: content.savoirFaireLinkHref|default('#'),
                content: linkContent,
                extra_class: 'about-savoir-faire__link',
                attrs: 'data-editable-href="true" data-field="savoirFaireLinkHref" data-label-field="savoirFaireLinkLabel" data-label-value="' ~ linkLabel|e('html_attr') ~ '"'
            } : {
                href: content.savoirFaireLinkHref,
                content: linkContent,
                extra_class: 'about-savoir-faire__link'
            }) }}
			{% endif %}
		</div>

		<div class="about-savoir-faire__grid">
			{% for i in 1..5 %}
				{% set skillField = 'skillLabel' ~ i %}
				{% set skillLabel = attribute(content, skillField)|default('') %}
				{% if skillLabel or editMode|default(false) %}
					<div class="about-savoir-faire__item">
						<span class="about-savoir-faire__item-divider" aria-hidden="true"></span>
						<p class="about-savoir-faire__item-label" {% if editMode|default(false) %} data-editable="true" data-editor-type="simple" data-field="{{ skillField }}" data-placeholder="Savoir-faire" {% endif %}>{{ skillLabel }}</p>
					</div>
				{% endif %}
			{% endfor %}
		</div>
	</div>
</section>