{% set prefix = "o-bolt-" %}

{% set attributes = create_attribute(attributes|default({})) %}

{% set alignOptions = [
  "top",
  "middle",
  "bottom"
] %}

{% set sizes = [
  "small",
  "medium"
] %}

{# Defaults for a vanilla `Button` component #}
{% set componentName = "flag" %}
{% set baseClass = prefix ~ componentName %}
{% set size = size | default("small") %}
{% set valign = valign | default("top") %}


{% set classes = [
  baseClass,
  size in sizes ? baseClass ~ "--" ~ size : "",
  valign in alignOptions ? baseClass ~ "--" ~ valign : ""
] %}


<div {{ attributes.addClass(classes | raw) }}>
  {% if figure %}
    {% set old_figure_with_content = figure.content %}
    {% set old_figure_with_icon = figure.icon %}
    {% set old_figure_with_image = figure.image %}

    <div class="o-bolt-flag__figure">
      {% block flag_figure %}
        {% set figureContent %}
          {% if old_figure_with_content %}
            {% include "@bolt-components-figure/figure.twig" with {
              media: {
                content: old_figure_with_content
              }
            } only %}
          {% elseif old_figure_with_icon %}
            {% include "@bolt-components-figure/figure.twig" with {
              media: {
                icon: old_figure_with_icon
              }
            } only %}
          {% elseif old_figure_with_image %}
            {% include "@bolt-components-figure/figure.twig" with {
              media: {
                image: old_figure_with_image
              }
            } only %}
          {% else %}
            {% include "@bolt-components-figure/figure.twig" with figure only %}
          {% endif %}
        {% endset %}

        {% if url %}
          {% include "@bolt-components-link/link.twig" with {
            display: "block",
            url: url,
            text: figureContent
          } only %}
        {% else %}
          {{ figureContent }}
        {% endif %}
      {% endblock %}
    </div>
  {% endif %}

  <div class="o-bolt-flag__body">
    {% block body %}
      {% for item in items %}
        {% if item.pattern %}
          {% include pattern_template(item.pattern) with item only %}
        {% elseif item.text %}
          {{ item.text }}
        {% endif %}
      {% endfor %}

      {{ content }}

    {% endblock %}
  </div>
</div>