{% extends 'layout.html' %}
{% load static %}


{% block extra_css %}
    <link rel="stylesheet" href="{% static 'function_views/css/profile.css' %}" type="text/css" />
{% endblock %}


{% block content %}
    <div class="viewport">
    {% include 'partials/header.html' %}
        <div class="container">
            <div class="account-header">
                <img class="user-avatar" src="{{ user.avatar }}" alt="profile">
                <div class="account-details">
                    <h2 class="username">{{ user.name }}</h2>
                    <div class="user-personal-info">
                        <div class="user-title meta"><i class="fas fa-suitcase"></i> <span>{{ user.profession }}</span></div>
                        <div class="user-location meta"><i class="fas fa-globe-americas"></i> <span>{{ user.location }}</span></div>
                    </div>
                    <div class="user-social-profiles">
                        <div class="user-twitter meta"><i class="fab fa-twitter"></i> <span>@{{ user.twitter_profile }}</span></div>
                        <div class="user-instagram meta"><i class="fab fa-instagram"></i> <span>@{{ user.instagram_profile }}</span></div>
                        <div class="user-website meta"><i class="fas fa-window-maximize"></i> <a href="{{ user.website }}">{{ user.website }}</a></div>
                    </div>

                </div>
            </div>
            <p class="user-bio">{{ user.bio }}</p>
        </div>
        <a href="{% url 'users' %}" class="back-to-users"><i class="fas fa-arrow-left"></i> <span>Back to users</span></a>
    </div>
{% endblock %}