{% from "macros/_form.html" import render_form %}

{% extends "layout.html" %}

{% block page_title %}🖄 {{project.name}}{% endblock %}
{% block body_class %}projectpost{% endblock %}

{% block js %}
  {% if config.ENV == 'prod' %}
    <script src="https://cdn.jsdelivr.net/npm/easymde@2/dist/easymde.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/easymde@2/dist/easymde.min.css">
  {% else %}
    <script src="{{ url_for('static', filename='libs/easymde/easymde.min.js')}}"></script>
    <link href="{{ url_for('static', filename='libs/easymde/easymde.min.css')}}" rel="stylesheet">
  {% endif %}
{% endblock %}

{% block content %}
  
  <h2 class="project-name">
    <a href="{{ url_for('project.project_view', project_id=project.id) }}"
       title="Back to project">
      {{project.name}}
    </a>
    <sup><i class="fa fa-comment text-sm"></i></sup>
  </h2>

  {% if (suggestions or stage) and project.progress and project.progress < 50 %}

    {% if config.LLM_API_KEY and not project.is_challenge %}
      <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;
        Coach me
      </button>
      {% include "includes/projectdialogs.html" %}
    {% endif %}

    <div class="alert float-right pe-5 mb-5 resource-list project-tips profile-projects alert-dismissible">
      <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

      <div class="resource-list-suggestions container-fluid p-1">
        <h5 class="category-tip m-0 mb-2 clearfix"
            title="This tip is only visible to you and your team">
          {{stage.tip}}
        </h5>
        {% if not all_valid %}
          <div class="stage-conditions clearfix">
            {% for item in stage.conditions.validate %}
              {% if item.valid %}
                <p class="m-0 stage-ok">
                  <i class="fa fa-thumbs-up"></i>&nbsp;
                  {{ item.help }}
                </p>
              {% else %}
                <p class="m-0 stage-no">
                  <i class="fa fa-paw"></i>&nbsp;
                  {{ item.help }}
                </p>
              {% endif %}
            {% endfor %}
          </div>
        {% endif %}
      </div><!-- /resource-list-suggestions -->

      {% if all_valid %}
        <div class="form-project-confirm clearfix pl-2 ms-1" role="alert">
          {% for item in stage.conditions.agree %}
            <span>
              <i class="fa fa-check-square-o"></i>&nbsp;
              {{ item }}
            </span><br>
          {% endfor %}
        </div>
      {% endif %}

    </div><!-- /alert -->
  {% endif %}

  {% if stage %}
    {% if all_valid and stage['name'] == 'LIVE' %}
      <div class="hidden alert alert-success mt-1" role="alert">
        <i class="fa fa-thumbs-up"></i>
        Your project is ready for action!
      </div>
    {% else %}
      {% if not all_valid %}
      <div class="form-project-stage">
        <p class="text-center mt-3 mb-0 hidden"><small>
          &#x1F3AF;
          To Post on another project, <b>Join</b> it or visit
          <a href="{{ url_for('public.user_profile', username=current_user.username) }}">your profile</a>
          to switch.
          For more info see
          <a href="{{ url_for('public.event_stages', event_id=project.event.id) }}" target="_blank">
            <i class="fa fa-arrow-right" aria-hidden="true"></i>
            Stages</a>
        </small></p>
      </div>
      {% endif %}
    {% endif %}
  {% endif %}

  {% if config.S3_KEY %}
    <button type="button" class="btn btn-light post-image-btn" style="display:none"
            title="Attach image" data-bs-toggle="modal" data-bs-target="#uploadImage">
      <i class="fa fa-image text-info" area-hidden="true"></i>
      Attach
    </button>
  {% endif %}

  <div class="form-project-post">
    {% if stage %}
      {{ render_form(url_for('project.project_post', project_id=project.id), form, formid='projectPost') }}
    {% else %}
      {{ render_form(url_for('project.project_comment', project_id=project.id), form, formid='projectPost') }}
    {% endif %}
  </div>

  {% if posts %}
  <div class="jumbotron mt-5">
    <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-{{ s.icon }}" aria-hidden="true"></i>
      </div>
      <div class="timeline-content timeline-card js--fadeInBottom">
        <div class="content">
          {{s.text|markdown|safe}}
        </div>
        <div class="date">
          <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 %}
        </div>
      </div>
    </div>
    {% endfor %}
    </section>

    <center>
      <a href="{{ url_for('project.get_log', project_id=project.id) }}#log"
          title="Log and progress review" class="btn btn-light btn-lg">
        <i class="fa fa-paperclip" aria-hidden="true"></i> Log
      </a>
    </center>
  </div>
  {% endif %}

  <center class="mt-3 projectpost-nav"
    onclick="return $('#note').val().length == 0 || window.confirm('Your post will not be saved - continue?')">
    <a href="{{ url_for('project.project_view', project_id=project.id) }}"
       title="Cancel" class="btn btn-light">
      <i class="fa fa-arrow-left" aria-hidden="true"></i> Back to Project
    </a>
    {% if stage %}
      <div class="btn-group">
        <a href="{{ url_for('project.project_edit', project_id=project.id) }}" class="btn btn-light"
          title="Edit basic project data">
          <i class="fa fa-pencil" aria-hidden="true"></i>
          Edit</a>
        <a href="{{ url_for('project.project_details', project_id=project.id) }}" class="btn btn-light"
          title="Edit basic project data">
          <i class="fa fa-gear" aria-hidden="true"></i>
          Details</a>
      </div>
    {% endif %}
  </center>

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

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

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

{% endblock %}