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

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

{% block content %}

<div class="card mb-3">
    <div class="card-body">
        <h5>Username: <small>{{profile.username}}</small></h5>
        {% if profile.email %}
            {% if profile.email_is_verified %}
                <h5>Email: <small style="margin-right: 0.7%;">{{profile.email|default:""}}</small>
                    <img src="{% static 'icons/verified.png' %}" alt="{% static 'icons/verified.png' %}" width="22px">
                </h5>
                {% if profile.send_email %}
                    <h5>Send Email:
                        <img style="margin-left: 0.5%; margin-bottom: 0.18%;" src="{% static 'icons/true.png' %}" alt="{% static 'icons/true.png' %}" width="23px">
                    </h5>
                {% else %}
                    <h5>Send Email: 
                        <img style="margin-left: 0.6%; margin-bottom: 0.15%;" src="{% static 'icons/false.png' %}" alt="{% static 'icons/false.png' %}" width="18px">
                    </h5>
                {% endif %}
            {% else %}
                <h5>Email: <small style="margin-right: 0.7%;">{{profile.email|default:""}}</small>
                    <a href="/account/send-otp" style="text-decoration: none; font-size: 16px;">
                        Verify
                    </a>
                </h5>
            {% endif %}
        {% endif %}
        <h5>IMDB API Key: <small>{{profile.imdb_api_key}}</small></h5> 
    </div>
</div>

<a href="/account/profile-editing" style="color: inherit; text-decoration: none;">
    <button type="button" class="btn btn-primary">Edit Profile</button>
</a>
<a href="/account/change-password" style="color: inherit; text-decoration: none;">
    <button type="button" class="btn btn-primary">Change Password</button>
</a>

{% endblock content %}