{# ------------------------------------
 # Component: Styleguide Card
 # ------------------------------------ #}
{% import '../../../templates/macros/component-utils.twig' as utils %}

{# Namespace #}
{% set ns = 'sg-card' %}

{{ utils.checkForId(ns, id) }}

<div id="{{ id }}" class="{{ns}}{{ utils.gatherCssClasses(ns, modifier, additionalClasses) }}">

  {% if title is defined %}
    <header class="{{ns}}__header">
      <a href="#{{ id }}" class="{{ns}}__anchor">#</a>
      <h3>{{ title }}</h3>
    </header>
  {% endif %}

  {% if markup is defined %}
    <div class="{{ns}}__preview">
      {{ markup }}
    </div>

    <div class="{{ns}}__code-preview">
      <div class="{{ns}}__toggle-code {{ns}}__toggle-code--show">Show Code</div>
      <div class="{{ns}}__toggle-code {{ns}}__toggle-code--hide">Hide Code</div>
      <div class="{{ns}}__code-wrap">
        <button class="{{ns}}__btn-copy-code sg-btn-copy" data-clipboard-text='{{ markup }}'>Copy</button>
        <pre class="sg-code">
          <code class="language-markup">{{ markup|e }}</code>
        </pre>
      </div> {# __code-wrap #}
    </div> {# __code #}
  {% endif %}
</div> {# .sg-card #}