{% extends "templates/web.html" %}
{% block head_include %}
<meta name="description" content="{{ 'Community' }}" />
<meta name="keywords" content="An app that supports Communities." />
<style>
  section {
    padding: 2rem;
    color: #000000;
  }

  svg {
    width: 200px;
    height: 200px;
  }

  .dashboard__parent {
    display: flex;
  }

  .dashboard__name {
    font-weight: normal;
    font-style: normal;
    font-size: 36px;
    line-height: 42px;
  }

  .dashboard__details {
    padding-top: 2rem;
  }

  .dashboard__course {
    border: 1px solid black;
    padding: 1rem;
    margin: 0.5rem;
    width: 48%;
  }

  .dashboard__courseHeader {
    display: flex;
    justify-content: space-between;
    height: 50px;
    margin-bottom: 3px;
  }

  .dashboard__badge {
    background: #D6D6FF;
    border-radius: 20px;
    color: #1712FE;
    padding: 0.5rem;
    height: fit-content;
  }

  .dashboard__description {
    height: 100px;
  }

  @media (max-width: 900px) {
    .dashboard__parent {
      flex-direction: column;
    }
  }
</style>
{% endblock %}
{% block page_content %}
<div class="dashboard__parent">
  <div class="dashboard__photo mr-5">
    {{ widgets.Avatar(member=member, avatar_class="avatar-xl") }}
  </div>
  <div class="dashboard__details">
    <div class="dashboard__name">
      <a class="anchor_style" href="/{{member.username}}">{{ member.full_name }}</a>
    </div>
    <div>
      <ul class="nav nav-tabs mt-4" id="myTab" role="tablist">
        {% for tab in profile_tabs %}
          <li class="nav-item">
            {% set slug = title.lower().replace(" ", "-") %}
            {% set selected = loop.index == 1 %}
            {% set active = 'active' if loop.index == 1 else '' %}
            <a class="nav-link {{ active }}" id="{{ slug }}-tab" data-toggle="tab" href="#{{ slug }}" role="tab" aria-controls="{{ slug }}"
              aria-selected="{{ selected }}">Sketches</a>
          </li>
        {% endfor %}
      </ul>
    </div>
    <div>
      {% for tab in profile_tabs %}
        {% set slug = title.lower().replace(" ", "-") %}
        <div class="tab-content">
          <div class="tab-pane fade py-4 show active" role="tabpanel" id="slug">
            {{ tab.render() }}
          </div>
        </div>
      {% endfor %}
    </div>
  </div>
</div>
{% endblock %}

<!-- this is a sample default web page template -->