{% extends "layout.html" %}
{% import "macros/_detail.html" as detail %}
{% import "macros/_project.html" as ppp %}

{% block page_title %}{{project.name}} - {{project.event.name}}{% endblock %}

{% block page_meta %}
  <meta property="og:type" content="website"/>
  <meta property="og:url" content="{{ url_for('project.project_view', project_id=project.id, _external=True) }}"/>
  <meta property="og:title" content="{{project.name}}"/>
  <meta property="og:description" content="{% if project.summary %}{{project.summary}}{% else %}{{ project.longtext|striptags|truncate(120) }}{% endif %}"/>
  <meta name="description" content="{{project.summary}}"/>
  <meta name="author" content="{{project.user.username}}"/>
  <meta name="dribdat:project:id" content="{{project.id}}"/>
{% endblock %}

{% block css %}
<link href="{{ url_for('static', filename='css/rainbow/zenburnesque.css') }}" rel="stylesheet" type="text/css">
{% endblock %}
{% block js %}
<script type="text/javascript" src="{{ url_for('static', filename='css/rainbow/rainbow-custom.min.js') }}"></script>
{% endblock %}

{% block body_class %}project-home{% endblock %}

{% block content %}

{{ detail.render_project_buttons(project, project_starred, past_version, allow_edit, lock_editing, allow_revert, allow_post, current_user, False) }}
{{ detail.render_project_image(project) }}
{{ detail.render_project_head(project) }}

{% if not project.is_challenge and not project.event.lock_resources %}
  <div class="float-right">
    <a title="See original challenge" class="preview-challenge btn btn-default btn-lg"
       href="{{ url_for('project.get_challenge', project_id=project.id) }}">
        <i class="fa fa-arrow-left" aria-hidden="true"></i>
          Challenge</a>
  </div>
{% endif %}

{% if project.stats %}
  <br />
  {{ ppp.render_project_stats(project) }}
{% endif %}

<br clear="both" />

{% if suggestions %}
  <div id="suggest-md" title="Tips from the organizers for this project stage">
    <div class="row flex-row profile-projects">
    {% for project in suggestions %}
      <a class="col align-self-top ms-1 me-1 card project border border-info"
        {%- if project.image_url %}
          style="background-image:url('{{project.image_url}}'); padding-left: 120px"
        {%- endif %}
         href="{{ url_for('project.project_view', project_id=project.id) }}">
        <div class="card-body text-bg-light">
          <i class="fa fa-life-ring float-right" aria-hidden="true"></i>
          <h5 class="card-title">{{ project.name }}</h5>
          <p class="card-text">{{ project.summary|truncate(65) }}</p>
        </div>
      </a>
    {% endfor %}
    </div>
  </div>
{% endif %}

{% if project_dribs and not project.event.lock_resources %}
<a name="log"></a>
<div id="dribs-md" aria-labelledby="dribs-tab-md">

  {% if allow_post and not project.is_challenge %}
    <center>
      <div class="btn-group">
        <a href="{{ url_for('project.project_post', project_id=project.id) }}"
           class="btn btn-lg btn-success pr-3"
           title="Write a progress update">
          <i class="fa fa-clock-o" aria-hidden="true"></i>
          Post
        </a>
        {% if config.LLM_API_KEY %}
          <button data-bs-toggle="modal" data-bs-target="#autopostModal"
             title="Get tips from an AI coach" class="btn pl-3 pr-4 btn-lg btn-dark">
            &#x1F170;&#xFE0F;&#x2139;&#xFE0F;
          </button>
        {% endif %}
      </div>
    </center>
    {% include "includes/projectdialogs.html" %}
  {% endif %}

  <section class="timeline">
    {% for s in project_dribs %}
    <div class="timeline-item timeline-{{ s.name }} timeline-{{ s.icon }}" id="log-{{ s.id }}">
      <div class="timeline-img" title="{{ s.date|format_datetime }} ({{ s.name }})">
        {% if s.icon %}
          <i class="fa fa-{{ s.icon }}" aria-hidden="true"></i>
        {% endif %}
      </div>
      <div class="timeline-content timeline-card {% if not s.text %}timeline-notext{% endif %} js--fadeInBottom">

        {% if s.title and not s.text %}
          <h1>{{s.title}}</h1>
        {% elif s.title %}
          <div class="timeline-img-header">
            <h2>{{s.title}}</h2>
          </div>
        {% endif %}

        {% if s.id and (allow_post or current_user.is_admin) %}
          <a class="close delete" title="Delete post" href="{{ url_for('project.post_delete', project_id=project.id, activity_id=s.id) }}"
            onclick="if(!window.confirm('Delete this post?')) return false">&times;</a>
        {% endif %}
        {% if s.id and s.icon == 'paperclip' %}
          <a class="close revert" title="Show previous version" href="{{ url_for('project.post_preview', project_id=project.id, activity_id=s.id) }}">&#9100;</a>
        {% endif %}

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

        {% if not s.title %}
          <div class="date">
          {% if s.ref_url %}
            <a href="{{ s.ref_url }}">
          {% endif %}
              <span title="{{ s.date }}">
                {{ s.timesince }}
              </span>
              {% if s.author %}
                ~
                <a class="userlink"
                  href="{{ url_for('public.user_profile', username=s.author )}}">
                  {{ s.author }}</a>
              {% endif %}
          {% if s.ref_url %}
            </a>
          {% endif %}
          </div>
        {% endif %}
      </div><!-- /content -->
    </div>
    {% endfor %}

  </section>

  {% include "includes/projectnav.html" %}

  </div><!-- /dribs-md -->
  {% endif %}



  {% if project.user %}
    <div class="widget started-at">
      Posted
      <span title="{{ project.created_at }}">{{ project.created_at|until_date }}</span>
      by
      <a href="{{ url_for('public.user_profile', username=project.user) }}">
        <b>{{ project.user.username }}</b>
      </a>
      for
      <a href="{{ url_for('public.event', event_id=project.event.id) }}">
        <b>{{ project.event.name }}</b>
      </a>
    </div>
  {% endif %}

</div><!-- /.jumbotron .project-page -->

<div class="panel panel-default community-embed mt-5">
  <div class="panel-body">
    {{project.event.community_embed|safe}}
  </div>
</div>

{% if allow_edit %}
  {% include "includes/projectdialogs.html" %}
{% endif %}

{% endblock %}