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

{% block title %}User: {{ object.username }}{% endblock %}

{% block content %}
<div class="container">
  <style>
#membercard {
    color: #000;
    background-color: #8C50A5;
    border-radius: 14px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.5);
    background-image: url('/static/images/membership_card_background.png');
    width: 430px;
    height: 240px;
    margin-left: 20px;
    text-shadow: 1px 1px #FFF;
    position: relative;
    float: right;
}
  </style>
<h2>Profile</h2>
<div class="row">
  <div class="col-md-6">
    <img src="{{ user.image.profile.url }}" alt="Profile image"/>
    <p>{{ user.username }}</p>
    <p>{{ user.name }}</p>
    <p>{{ user.email }}</p>
    <p>Last login {{ user.last_login}}</p>
    <p>Member since</p>
    <p>Description: {{ blurb.description }}</p>
    <p>Skills: {{ blurb.description }}</p>

    <h3>Membership status</h3>
    <p>Membership Status: {{ membership.get_status }}</p>
    <p>Last Payment: {{membership.date}}</p>
    <p>Amount: &pound;{{membership.payment}}</p>
  </div>
  <div class="col-md-6">
    <div id="membercard" class="registered">
      <div class="date">Joined {{membership.date}}</div>
      <div class="container">
        <div class="middle">
          <p>MHS{{ user.id|stringformat:"05d" }}</p><p>{{user.name}}{{user.last_name}}</p>
          <a href="/profile/membership/cancel">Cancel Membership</a>
        </div>
      </div>
    </div>
  </div>
</div>

  <div class="row">
    <div class="col-sm-12">

      <h2>{{ object.username }}</h2>
      {% if object.name %}
        <p>{{ object.name }}</p>
      {% endif %}
    </div>
  </div>

{% if object == request.user %}
<!-- Action buttons -->
<div class="row">

  <div class="col-sm-12">
    <a class="btn btn-primary" href="{% url 'users:update' %}" role="button">My Info</a>
    <a class="btn btn-primary" href="{% url 'account_email' %}" role="button">E-Mail</a>
    <!-- Your Stuff: Custom user template urls -->
  </div>

</div>
<!-- End Action buttons -->
{% endif %}


</div>
{% endblock content %}