{% extends "base.html" %}

{% load static %}

{% block subnav %}
  <div class="flex items-center py-3 px-4 border-b md:px-0 md:border-0 border-slate">
    <div>
      {% if user.image.url %}
        <img src="{{ user.image.url }}" alt="user" class="inline rounded-lg w-[80px]" />
      {% else %}
        <i class="mr-2 text-5xl fas fa-user text-white/60"></i>
      {% endif %}
    </div>
    <div class="ml-4 text-sm">
      <span class="block">{{ user.get_full_name }}</span>
      <span class="text-xs text-slate">Joined {{ user.date_joined }}</span>
    </div>
  </div>
  <div class="relative py-8 px-4 space-y-4 text-sm uppercase border-b md:py-2 md:px-0 md:space-x-10 border-slate">
    <a href="" class="block md:inline md:py-1 md:border-b text-orange md:border-orange">Account</a>
    <a href="" class="block md:inline">Settings</a>
    <a href="#" class="block md:inline">Password</a>
    <a href="#" class="block md:inline">Help</a>
  </div>
{% endblock %}

{% block content %}
<div class="container">
<div class="content-section">
    <div class="mt-6">
      <img class="w-32 h-32 rounded-full md:h-auto" src="{{ user.profile.image.url }}">
    </div>

    <h3>Update Profile Photo</h3>

    {% if user_has_gh_username %}
      <form method="POST" action="{% url 'profile-photo-github' %}">
        {% csrf_token %}
        <button class="py-2 px-3 text-sm uppercase rounded border border-orange text-orange" type="submit">Use My GitHub Photo</button>
      </form>
    {% endif %}

    <form method="POST" enctype="multipart/form-data">
      {% csrf_token %}
      <fieldset>
            {{ form.as_p }}
      </fieldset>
      <div class="mb-4">
          <button class="py-2 px-3 text-sm uppercase rounded border border-orange text-orange" type="submit">Update</button>
      </div>
  </form>



</div>
</div>
{% endblock content %}
