{% extends "templates/web.html" %}
{% from "www/macros/profile.html" import profile %}
{% 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__profile {
        width: 150px;
        height: 155px;
        border-radius: 50%;
        object-fit: contain;
    }

    .dashboard__profileSmall {
        width: 59px;
        height: 57px;
        border-radius: 50%;
        object-fit: contain;
    }

    .dashboard__abbr {
        font-size: 50px;
        width: 155px;
        height: 155px;
        border-radius: 50%;
    }

    .dashboard__abbrSmall {
        font-size: 20px;
        width: 59px;
        height: 57px;
        border-radius: 50%;
    }

    .dashboard__parent {
        display: flex;
    }

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

    .dashboard__details {
        padding-top: 2rem;
        width: 80%;
    }

    .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;
    }
</style>
{% endblock %}
{% block page_content %}
<section>
    <div class="dashboard__parent">
        <div>
            {{ profile(member.photo, member.full_name, abbr, "large")}}
        </div>
        <div class="dashboard__details">
            <div class="dashboard__name">
                {{member.full_name}}
            </div>
            <div>
                <ul class="nav nav-tabs mt-4" id="myTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab"
                            aria-controls="home" aria-selected="true">Sketches</a>
                    </li>
                </ul>
            </div>
            <div>
                <div class="tab-content">
                    <div class="tab-pane fade py-4 show active" role="tabpanel" id="home">
                        <div class='container'>
                            <div class="row row-cols-1 row-cols-xl-5 row-cols-lg-4 row-cols-md-3 row-cols-sm-2">
                                {% if sketches %}
                                {% for sketch in sketches %}
                                <div class="col m-4">
                                    <div class="card sketch-card" style="width: 200px;">
                                        <div class="card-img-top">
                                            <a href="/sketches/{{sketch.sketch_id}}">
                                                {{ sketch.to_svg() }}
                                            </a>
                                        </div>
                                        <div class="card-footer">
                                            <div class="sketch-title">
                                                <a href="sketches/{{sketch.sketch_id}}">{{sketch.title}}</a>
                                            </div>
                                            <div class="sketch-author">
                                                by {{sketch.get_owner_name()}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                                {% endif %}
                            </div>
                            {% if not sketches %}
                                <p class="text-center">{{member.full_name}} has not created any skecth yet.</p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}

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