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

{% extends "layout.html" %}

{% block page_title %}✐ {{project.name}}{% endblock %}
{% block body_class %}projectform projectedit{% 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 %}

  {% if config.S3_KEY %}
    <button type="button" class="btn btn-light btn-lg mt-2 m-1" style="display:none" data-bs-toggle="modal" data-bs-target="#uploadImage">
      <i class="fa fa-image text-info" area-hidden="true"></i>
      Image
    </button>

    <button type="button" class="btn btn-light btn-lg mt-2 m-1" style="display:none" data-bs-toggle="modal" data-bs-target="#uploadFile">
      <i class="fa fa-paperclip text-info" area-hidden="true"></i>
      Attach
    </button>
    
    <button type="button" class="btn btn-light btn-lg mt-2 m-1" style="display:none" data-bs-toggle="modal" data-bs-target="#uploadPackage">
      <i class="fa fa-paperclip text-info" area-hidden="true"></i>
      Data
    </button>
  {% endif %}

  <button type="button" class="btn btn-light btn-lg mt-2 m-1" style="display:none" data-bs-toggle="modal" data-bs-target="#suggestTool">
    <i class="fa fa-rocket text-info" area-hidden="true"></i>
    Tools
  </button>

  <button type="button" class="btn btn-light btn-lg mt-2 m-1" style="display:none" data-bs-toggle="modal" data-bs-target="#uploadMedia">
    <i class="fa fa-tv text-info" area-hidden="true"></i>
    Media
  </button>

  <div class="btn-group project-edit-buttons switch-editor" role="group" aria-label="Project tools">
    <a href="{{ url_for('project.project_view', project_id=project.id) }}" 
       class="btn btn-lg btn-light" target="_blank" title="Link to project view">
      <i class="fa fa-link" aria-hidden="true"></i>
    </a>
    <a href="{{ url_for('project.project_edit', project_id=project.id) }}" 
       title="Switch to editing of project basic information" 
       class="btn btn-lg btn-warning {% if not detail_view %}disabled hidden{% endif %}">
      <i class="fa fa-arrow-left" aria-hidden="true"></i>
      Basics</a>
    <a href="{{ url_for('project.project_details', project_id=project.id) }}" 
       title="Switch to editing of project details" 
       class="btn btn-lg btn-warning {% if detail_view %}disabled hidden{% endif %}">
      <i class="fa fa-arrow-right" aria-hidden="true"></i>
      Details</a>
  </div><br clear="all">

  <div class="jumbotron project-page phase-Project">
  {% if detail_view %}
    {{ render_form(url_for('project.project_details', project_id=project.id), form, formid='projectDetails') }}
  {% else %}
   <div class="project-headline">
      <h2 class="project-name">
        {{project.name}}
        <a class="btn btn-sm mb-4 btn-light" 
           href="{{ url_for('project.project_details', project_id=project.id) }}" 
           title="Edit project title">
          <i class="fa fa-pencil"></i>
        </a>
      </h2>
    </div>
    {{ render_form(url_for('project.project_edit', project_id=project.id), form, formid='projectEdit') }}
  {% endif %}
  </div>

  {% if not detail_view %}
  <center id="activateEditor" class="mt-4">
    <a href="{{ url_for('project.project_details', project_id=project.id) }}" 
      class="btn btn-md btn-warning mt-2 mb-1 me-4"
      title="Open the project details">
      <i class="fa fa-arrow-right" aria-hidden="true"></i>
      Edit Details
    </a>

    <button data-do="activate" type="button" 
      class="btn btn-light btn-md hidden mt-2 mb-1" aria-pressed="false"
      title="Activate a WYSIWYG text editor">
      <i class="fa fa-pencil text-info" area-hidden="true"></i>
      Editor: <b>Text</b>
    </button>
    <button data-do="reset" type="button" 
      class="btn btn-light btn-md hidden mt-2 mb-1" aria-pressed="false"
      title="Switch to a plain text editor">
        <i class="fa fa-pencil text-info" area-hidden="true"></i>
        Editor: <b>EasyMDE</b>
    </button>
  </center>
  {% endif %}

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

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

{% endblock %}