{% extends "layouts/base.html" %}

{% block title %} Profile {% endblock title %}

<!-- Specific CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

<!-- ### $App Screen Content ### -->
<main class='main-content bgc-grey-100'>
    <div id='mainContent'>
        <div class="row gap-20 masonry pos-r">
            <div class="masonry-sizer col-md-6"></div>
            <div class="masonry-item col-md-6">
                <div class="bgc-white p-20 bd">
                    <h6 class="c-grey-900">Basic Form</h6>
                    <div class="mT-30">
                        <form>
                            <div class="mb-3">
                                <label class="form-label" for="exampleInputEmail1">Email address</label>
                                <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
                                <small id="emailHelp" class="text-muted">We'll never share your email with anyone else.</small>
                            </div>
                            <button type="submit" class="btn btn-primary btn-color">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
            <div class="masonry-item col-md-6">
                <div class="bgc-white p-20 bd">
                    <div class="row pos-r justify-content-center justify-content-md-start">
                        <div class="col-md-4 col-8">
                            <img src="{{ request.user.icon.url }}" alt="" class="bdrs-50p w-100">
                        </div>
                        <div class="col-md-6">
                            <h3>{{ request.user.name }}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}{% endblock javascripts %}