{% extends "layout.html" %}
{% import "macros/_event.html" as evnt %}
{% import "macros/_project.html" as proj %}

{% block page_title %}{{ user.username }}{% endblock %}
{% block body_class %}userprofile{% endblock %}

{% block page_meta %}
  <link rel="alternate" type="application/rss+xml" title="RSS: Dribs by {{ user.name }}" href="/feeds/user/{{ user.username }}">
{% endblock %}

{% block content %}

{% if is_current_user and score_tip < 100 %}
  <div class="alert alert-light alert-dismissible fade show"
       title="This tip is only visible to you">
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    To improve your score
    {% if score_tip > 0 %}
      ({{ score_tip }}%)
    {% endif %} -
    write a complete Profile and share your Story. 
  </div>
{% endif %}

{% if current_user and current_user.is_authenticated %}

  <div class="float-right mt-2">
  {% if is_current_user %}

    <div class="btn-group">
      <a href="{{ url_for('auth.user_profile') }}" class="btn btn-warning btn-lg">
        <i class="fa fa-child"></i>
        Update my Profile
      </a>

      <a href="{{ url_for('auth.user_story') }}" class="btn btn-success btn-lg">
        <i class="fa fa-child"></i>
        My Story
      </a>
    </div>

  {% elif current_user.is_admin %}

    <div class="btn-group">
      <a id="user-email"
         href="mailto:{{ user.email }}"
         class="btn btn-info btn-lg">
        <i class="fa fa-email" aria-hidden="true"></i>
        E-mail</a>

      <a id="user-edit"
          href="{{ url_for('admin.user', user_id=user.id )}}"
          class="btn btn-secondary btn-primary btn-lg">
        <i class="fa fa-child"></i>
        Review
      </a>
    </div>

  {% endif %}
  </div>

  <br clear="all" />

  {% if may_certify %}
    <div class="float-right p-0 m-0">
      <a id="get-certified" class="btn btn-success btn-lg"
        href="{{ url_for('public.user_cert') }}" download
        title="Download my certificate">
        Get Certificate
      </a>
    </div>
  {% endif %}

{% endif %}

{% if user.my_goals %}
  <div class="col-6 mt-3" title="My Goals">
    <a name="goals"></a>
    <div class="profile-goals">
      {{ user.my_goals|markdown }}
    </div>
  </div>
{% endif %}

<div class="row profile-header">

  {% if user.carddata %}
    <div class="col-3">
      <a href="{{ user.webpage_url }}" class="profile-picture">
        <img src="{{user.carddata}}"/>
      </a>
    </div>
  {% endif %}

  {% if user.fullname %}
    <h1 class="col-sm text-start">
      <span class="user-name">
        {{ user.fullname }}
      </span>
      {% if user.fullname != user.username %}
        <br><tt class="text-secondary">{{ user.username }}</tt>
      {% endif %}
    </h1>
  {% else %}
    <h1 class="col-sm text-start user-name">
      <tt>{{ user.username }}</tt>
    </h1>
  {% endif %}

</div>
<div class="row mb-3">

  <div class="col-sm">
    {% if user.webpage_url %}
      <div class="profile-social m-0">
        <a href="{{ user.webpage_url }}" class="btn btn-lg" target="_blank" rel="noopener noreferrer">
        {% if not user.cardtype %}
          <i class="fa fa-globe"></i>&nbsp;Visit
        {% else %}
          <i class="fa fa-{{ user.cardtype }}"></i>&nbsp;Follow
        {% endif %}
        </a>
      </div>
    {% endif %}
  </div>

  <div class="col-3">
    <ul class="profile-roles">
    {% for role in user.roles %}
      <li>{{ role.name }}</li>
    {% endfor %}
    </ul>
  </div>

  <div class="col-sm" style="text-align:right">
  {% if is_current_user %}
    <a id="get-mydata" class="btn btn-light btn-md"
      href="{{ url_for('api.current_user_hackathon_json') }}" download
      title="Download a snapshot of my contributions">
      <i class="fa fa-download"></i>
      My Data
    </a>
  {% endif %}
  {% if score %}
    <div class="user-score ms-4 fs-3" title="Total score across all projects, adjusted by profile completeness">{{ score }}</div>
  {% endif %}
  </div>
</div>

{% if user.my_story %}
<div class="row">
  <div class="profile-story col-11" title="My story">
    <a name="story"></a>
    <blockquote class="profile-text bg-light text-dark">
      {{ user.my_story|markdown }}
    </blockquote>
  </div>
</div>
{% endif %}

{% if user.my_skills %}
<div class="row m-3">
  <div class="col-2 fs-4 text-end" id="skills">&#x1F9BE; Skills</div>
  <div class="profile-skills col-10">
      {% for s in user.my_skills %}
        <a href="{{ url_for('public.all_participants') }}?u=*{{s}}" class="skill">
      	 {{s}}
        </a>
      {% endfor %}
  </div>
</div>
{% endif %}

{% if user.my_wishes %}
<div class="row m-3">
  <div class="col-2 fs-4 text-end" id="wishes">&#x1F38B; Aims</div>
  <div class="profile-wishes col-10">
      {% for w in user.my_wishes %}
        <a href="{{ url_for('public.all_participants') }}?u=*{{w}}" class="wish">
         {{w}}
        </a>
      {% endfor %}
  </div>
</div>
{% endif %}

{% if not projects %}
  {% if is_current_user %}

    {% if events_next %}
    <div class="row events-next mb-4">
      {% for event in events_next %}
        {{ evnt.render_home_event(event) }}
      {% endfor %}
    </div><!-- /.row events-next -->
    {% endif %}

    <div class="alert alert-light">
      No projects here yet. <b>Join</b> an event and start something awesome!
    </div>

  {% endif %}
{% else %}
  <h2 class="mt-5 mb-2">Experience</h2>

  {% if events %}
    <a name="events"></a>
    <ul class="row profile-events mb-4">
      {% for event in events %}
        <li>
          <a href="{{ url_for('public.event', event_id=event.id) }}">
            {{ event.name }}</a>
        </li>
      {% endfor %}
    </ul><!-- /.row -->
  {% endif %}

  <a name="projects"></a>
  <div class="profile-projects honeycomb mb-4">
    <div class="row ibws-fix">
    {% for project in projects %}
      {{ proj.render_project_hexagon(project) }}
    {% endfor %}
    </div>
  </div><!-- /profile-projects -->
{% endif %}

{% if vitae %}
<a name="vitae"></a>
<h2 title="Edolare Vitae">Resume</h2>
<div class="profile-vitae jumbotron" title="Hacker Vitae">
    <table class="table bg-white"><tbody>
    {% for vitatype in vitae %}
    <tr>
      <th colspan="2" title="Career step" class="bg-light text-dark text-center"
        data-bs-toggle="collapse" href="#collapse-{{vitatype}}" role="button" aria-expanded="false">
          {{ vitatype }}
      </th>
    </tr>
      {% for vita in user.simple_resume()[vitatype] %}
      <tr class="collapse" id="collapse-{{vitatype}}">
        </td><th title="Title or position">
            {{ vita.name }}
        </th><td title="Summary">
            {{ vita.summary }}
        </td>
      </tr>
      {% endfor %}
    {% endfor %}
    </tbody></table>
    <a id="get-myvitae" class="btn btn-light btn-sm"
      href="{{ url_for('api.profile_user_resume_json', user_id=user.id) }}" download
      title="Download my JSON resume">
      <i class="fa fa-download"></i>
      Download
    </a>
  </div>
{% endif %}

{% if not posts %}
  {% if is_current_user %}
    <div class="alert alert-light">
      Once you join a project, write some <b>Posts</b> to show a log of your work here.
    </div>
  {% endif %}
{% else %}

<a name="timeline"><h2 class="mt-4 mb-2" onclick="this.innerHTML='Captain\'s Log, supplemental';console.log('To boldly go...')">Dribs</h2></a>
<div class="jumbotron">
  
  {% if is_current_user %}
    <center>
        <a id="project-post"
                href="{{ url_for('public.user_post') }}"
                title="Post an update to your current project"
                class="btn btn-success btn-lg">
            <i class="fa fa-clock-o" aria-hidden="true"></i>
            Write a Post</a>
    </center>
  {% endif %}

  <section class="timeline">
  {% for s in posts %}
  <div class="timeline-item timeline-{{ s.name }} timeline-{{ s.icon }}">
    <div class="timeline-img">
      <i class="fa fa-paperclip" aria-hidden="true"></i>
    </div>
    <div class="timeline-content timeline-card js--fadeInBottom">
      <div class="timeline-img-header">
      <a href="{{ url_for('project.project_view', project_id=s.project_id) }}#log">
        <h2>{{s.project_name}}</h2>
      </a>
      </div>

      {% if s.content %}
      <div class="content">
        {{s.content|markdown|safe}}
      </div>
      {% endif %}

      <div class="date" title="{{s.date}}">{{s.timesince}}</div>
    </div>
  </div>
  {% endfor %}
  </section>
</div>
{% endif %}

{% endblock %}