{% extends 'page' %}

{% block title %}{{ page.title }}{% endblock %}

{% block content_wrapper_inner %}
  <div class="md:tw-flex tw--mx-4">
    {% if page.image or page.links.twitter or page.links.drupalorg %}
      <div class="tw-px-4 tw-flex-0 tw-w-32 md:tw-w-48 tw-mb-4">
        {% if page.image %}
          <div class="tw-rounded-full tw-overflow-hidden tw-border-4 tw-border-solid tw-border-purple-500 tw-mb-4">
            <img class="tw-max-w-full tw-block" src="/images/speakers/{{ page.image }}" alt="{{ page.name }}">
          </div>
        {% endif %}

        {% if page.links %}
          <div class="tw--mb-1">
            {% if page.links.drupalorg %}
              <div class="tw-pl-6 tw-mr-4 tw-bg-no-repeat tw-bg-left tw-mb-1" style="background-image: url(/themes/dcb2017/images/drop-1.png)">
                <a href="https://www.drupal.org/u/{{ page.links.drupalorg }}">{{ page.links.drupalorg }}</a>
             </div>
            {% endif %}

            {% if page.links.twitter %}
              <div class="tw-pl-6 tw-mr-4 tw-bg-no-repeat tw-bg-left tw-mb-1" style="background-image: url(/themes/dcb2017/images/twitter-1.png)">
                <a href="https://twitter.com/{{ page.links.twitter }}">{{ page.links.twitter }}</a>
              </div>
            {% endif %}
          </div>
        {% endif %}
      </div>
    {% endif %}

    <div class="tw-px-4 tw-flex-1">
      <div class="markup">
        <div class="tw-font-bold tw-text-xl">
          {% include 'speaker-role' with { speaker: page } %}
        </div>

        {% block content %}{% endblock %}

        <div class="tw-mt-8 tw-block">
          <a class="tw-text-purple-500 hocus:tw-text-pink-600 tw-no-underline hocus:tw-underline" href="/#speakers">View all speakers &rarr;</a>
        </div>
      </div>

      <aside>
        {% include 'speaker-session' with {
          sessions: sessionsForSpeaker(page, data.sessions),
        } %}
      </aside>
    </div>
  </div>
{% endblock %}