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


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


{% block content %}
    <div class="viewport">
        {% include 'partials/header.html' %}

        <div class="users-container">
            <table class="users-table">
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Profession</th>
                    <th>Location</th>
                    <th>Twitter</th>
                    <th>Instagram</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                {% for user in users %}
                    <tr>
                        <td class="user-id"><span>{{ user.id }}</span></td>
                        <td class="user-name"><a href="{{ user.id }}/"><span>{{ user.name }}</span></a></td>
                        <td class="user-title"><span>{{ user.profession }}</span></td>
                        <td class="user-location"><span>{{ user.location }}</span></td>
                        <td class="user-twitter"><span>@{{ user.twitter_profile }}</span></td>
                        <td class="user-instagram"><span>@{{ user.instagram_profile }}</span></td>
                        <td class="user-profile-link"><a href="{{ user.id }}/"><i class="fas fa-external-link-alt"></i></a></td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>


    </div>
{% endblock %}