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

{% block more_head %}
<link rel="stylesheet" type="text/css" media="all" href="{% get_static_prefix %}apps/css/app_page_edit.css" />
<link rel="stylesheet" type="text/css" media="all" href="{% get_static_prefix %}apps/css/app_stars.css" />
<script type="text/javascript" src="{% get_static_prefix %}common/lib/js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="{% get_static_prefix %}common/lib/js/jquery.timeago.js"></script>
<script type="text/javascript" src="{% get_static_prefix %}common/lib/js/Markdown.Converter.js"></script>
<script type="text/javascript" src="{% get_static_prefix %}common/lib/js/Markdown.Sanitizer.js"></script>
<script type="text/javascript" src="{% get_static_prefix %}common/js/setup_ajax_for_csrf.js"></script>
<script type="text/javascript" src="{% get_static_prefix %}common/js/markdown_util.js"></script>
<script type="text/javascript" src="{% get_static_prefix %}common/js/msgs.js"></script>
<script type="text/javascript" src="{% get_static_prefix %}apps/js/jquery.tablednd.js"></script>
{% endblock %}

{% block title %}- Edit {{ app.fullname }}{% endblock %}

{% block content %}
{# app header #}
<div class="row" style="margin-bottom: 3em;">
  <div class="span1" style="line-height: 74px;">
    <img id="cy-app-icon" src="{{ app.icon_url }}" rel="tooltip" title="Click here to choose another icon">
  </div>
  <div class="span7">
    <h2 id="app-title">
      <span rel="tooltip" title="Your app name cannot be changed">
        {{ app.fullname }}
      </span>
    </h2>
    <input class="span7" id="cy-app-description" type="text" placeholder="Enter a short description of your app here" value="{% if app.description %}{{ app.description|escape }}{% endif %}" maxlength="{{ app_description_maxlength }}">
  </div>
</div>
{# end app header #}

<div class="row">
  {# tabs #}
  <div class="span8">
    {# tab titles #}
    <ul id="cy-app-info-tabs" class="nav nav-tabs">
      <li class="active"><a href="#cy-app-details-tab" data-toggle="tab"><b>Details</b></a></li>
      {% if app.has_releases %}
      <li><a href="#cy-app-releases-tab" data-toggle="tab"><b>Release History</b></a></li>
      {% endif %}
    </ul>
    {# end tab titles #}

    {# tab content #}
    <div id="cy-app-info-content" class="tab-content">
      {# details tab #}
      <div class="tab-pane active" id="cy-app-details-tab">
        {# categories #}
        <div class="row"><div class="span8"><h6 class="muted">CATEGORIES</h6></div></div>
                    
        <div class="row">
          <div class="span8" id="cy-app-tags-list">
          </div>
        </div>

        <div class="row">
          <div class="span3">
            <button id="cy-app-tag-add-btn" class="btn btn-small">
              <i class="icon-plus"></i> Add
            </button>
          </div>
        </div>
        {# end categories #}

        <div class="row"><div class="span8"><hr></div></div>

        {# screenshots #}
        <div class="row"><div class="span8"><h6 class="muted">SCREENSHOTS</h6></div></div>
                    
        <div class="row">
          <div class="span8" id="cy-app-screenshots">
          </div>
        </div>

        <div class="row">
          <div class="span4">
            <button id="cy-app-screenshot-add-btn" class="btn btn-small">
              <i class="icon-plus"></i> Add
            </button>
            <button id="cy-app-screenshot-delete-btn" class="btn btn-small disabled">
              <i class="icon-trash"></i> Delete
            </button>
          </div>
        </div>
        {# end screenshots #}

        <div class="row"><div class="span8"><hr></div></div>

        {# app details #}
        <div class="row"><div class="span8"><h6 class="muted">DETAILS</h6></div></div>

        <div class="row">
          <div class="span8">
            <textarea id="cy-app-details" class="span8" rows="15">{% if app.details %}{{ app.details }}{% endif %}</textarea>
          </div>
        </div>

        <div class="row"><div class="span3"><h6 class="muted">PREVIEW</h6></div></div>

        <div class="row">
          <div class="span8">
            <div id="cy-app-details-preview"></div>
          </div>
        </div>
        {# end app details #}

        <div class="row"><div class="span8"><hr></div></div>

        {# authors #}
        <div class="row"><div class="span8"><h6 class="muted">AUTHORS</h6></div></div>

        <div class="row">
          <div class="span8">
            <table class="table table-bordered table-striped" id="cy-app-authors">
              <thead>
                <th>Name</th>
                <th>Institution (Optional)</th>
                <th></th>
              </thead>
            </table>
            <button class="btn btn-small" id="cy-app-author-add"><i class="icon-plus"></i> Add</button>
          </div>
        </div>
        {# end authors #}
      </div>
      {# end app details tab #}

      {# releases tab #}
      {% if app.has_releases %}
      <div class="tab-pane" id="cy-app-releases-tab">
        <div class="row">
          <div class="span7">
            {% for release in app.releases %}
            <div class="cy-release" release_id="{{ release.id }}">
              <h4>
                {{ release.version }}
                <small><abbr class="timeago" title="{{ release.created_iso }}"></abbr></small>
                <button class="btn btn-small {% if release.dependents.count %}disabled{% endif %} cy-release-delete"><i class="icon icon-trash"></i> Delete</button>
              </h4>
              <p>
                <strong>Works with Cytoscape</strong>
                {{ release.works_with }}
              </p>
              {% if release.releaseapi_set.count %}
              {% with releaseapi=release.releaseapi_set.get %}
              <p>
                <strong>API</strong>
                &nbsp;
                <a target="_blank" href="{{ releaseapi.pom_xml_file.url }}">pom.xml</a>
                &nbsp;
                <a target="_blank" href="{{ releaseapi.javadocs_jar_file.url }}-extracted">Javadocs</a>
              </p>
              {% endwith %}
              {% endif %}
              {% if release.dependents.count %}
              <p>
                <strong>Apps that depend on this release</strong>
                <ul>
                  {% for dependent in release.dependents.all %}
                  <li>
                    <a href="{% url 'app_page' dependent.app.name %}" target="_blank">{{ dependent.app.fullname }}</a> {{ dependent.version }}
                  </li>
                  {% endfor %}
                </ul>
              </p>
              {% endif %}
              <p><strong>Release Notes</strong></p>
              <textarea class="cy-release-notes" rows="5">{% if release.notes %}{{ release.notes }}{% endif %}</textarea>
              <h6 class="muted">PREVIEW</h6>
              <div class="cy-release-notes-preview"></div>
              <hr>
            </div>
            {% endfor %}
          </div>
        </div>
      </div>
      {% endif %}
      {# end releases tab #}
    </div>
    {# end tab content #}
  </div>
  {# end tabs #}
        
  {# right panels #}
  <div class="span3 offset1">
    {# save & cancel buttons #}
    <div id="save-actions">
      <a id="save-btn" class="btn btn-success disabled"><i class="icon-ok icon-white"></i> Save</a>
      <a id="cancel-btn" class="btn btn-danger"><i class="icon-remove icon-white"></i> Cancel</a>
    </div>
    {# end save & cancel buttons #}
            
    {# editors #}
    <div class="well">
      <h6 class="muted panel-title">Editors</h6>
      <ul class="nav nav-list" id="editors-list">
      </ul>
      <button id="cy-app-editor-add" class="btn btn-small"><i class="icon-plus"></i> Add</button>
      <button id="cy-app-editor-delete" class="btn btn-small disabled"><i class="icon-trash"></i> Delete</button>
    </div>
    {# end editors #}
        
    {# 2.x #}
    <div class="well cy-right-panel">
      <h6 class="muted panel-title">Cytoscape 2.x Plugin</h6>
                
      <fieldset class="control-group" id="cy-2x-plugin-download">
        <label>Download Link:</label>
        <input type="text" value="{% if app.cy_2x_plugin_download %}{{ app.cy_2x_plugin_download }}{% endif %}">
      </fieldset>
      <fieldset class="control-group" id="cy-2x-plugin-version" validate_regexp="^\d+\.\d+(\.\d+)?(-.+)?$">
        <label>Version:</label>
        <input type="text" value="{% if app.cy_2x_plugin_version %}{{ app.cy_2x_plugin_version }}{% endif %}">
        <span class="help-block">Examples: <em>2.0</em>, <em>4.32</em>, <em>2.0.3-beta</em></span>
      </fieldset>
      <fieldset class="control-group" id="cy-2x-plugin-release-date" validate_regexp="^\d{4}-\d{2}-\d{2}$">
        <label>Release Date:</label>
        <input type="text" value="{% if app.cy_2x_plugin_release_date %}{{ app.cy_2x_plugin_release_date.isoformat }}{% endif %}">
        <span class="help-block">Format: <em>yyyy-mm-dd</em></span>
      </fieldset>
      <fieldset class="control-group" id="cy-2x-versions" validate_regexp="^((\s*,\s*)?\d+(\.\d+)+)*$">
        <label>Supported versions of Cytoscape 2.x:</label>
        <input type="text" value="{% if app.cy_2x_versions %}{{ app.cy_2x_versions }}{% endif %}">
        <span class="help-block">Example: <em>2.4, 2.7, 2.8.1</em></span>
      </fieldset>
    </div>
    {# end 2.x #}

    {# resources #}
    <div class="well cy-right-panel">
      <h6 class="muted panel-title">Resources</h6>

      <fieldset class="control-group" id="cy-app-license-text">
        <label>License:</label>
        <input type="text" placeholder="License URL (http://...)" value="{% if app.license_text %}{{ app.license_text }}{% endif %}">
        <input type="checkbox" {% if app.license_confirm %}checked{% endif %}> Require confirmation
      </fieldset>
      <fieldset class="control-group" id="cy-app-website">
        <label><i class="icon-home"></i> Website:</label>
        <input type="text"  value="{% if app.website %}{{ app.website }}{% endif %}">
      </fieldset>
      <fieldset class="control-group" id="cy-app-tutorial">
        <label><i class="icon-book"></i> Tutorial:</label>
        <input type="text" value="{% if app.tutorial %}{{ app.tutorial }}{% endif %}">
      </fieldset>
      <fieldset class="control-group" id="cy-app-citation" validate_regexp="^\d+$">
        <label><i class="icon-heart"></i> Citation:</label>
        <input type="text" placeholder="PubMed ID" value="{% if app.citation %}{{ app.citation }}{% endif %}">
        <span class="help-block">Example: <em>23595664</em></span>
      </fieldset>
      <fieldset class="control-group" id="cy-app-coderepo">
        <label><i class="icon-list-alt"></i> Code Repository:</label>
        <input type="text" value="{% if app.coderepo %}{{ app.coderepo }}{% endif %}">
      </fieldset>
      <fieldset class="control-group" id="cy-app-automation">
	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <label><i class="fa fa-gear fa-spin" style="color:black"></i> Automation Support:</label>
        <input type="text" value="{% if app.automation %}{{ app.automation }}{% endif %}">
      </fieldset>
      <fieldset class="control-group" id="cy-app-contact">
        <label><i class="icon-envelope"></i> Contact Email:</label>
        <input type="text" value="{% if app.contact %}{{ app.contact }}{% endif %}">
      </fieldset>
    </div>
    {# end resources #}
  </div>
  {# end right panels #}
</div>
    
{# file choosers #}
<div style="visibility: hidden;">
  <input type="file" name="files[]" id="cy-app-icon-file-chooser">
</div>

<div style="visibility: hidden;">
  <input type="file" name="files[]" id="cy-app-screenshot-file-chooser" multiple>
</div>
{# end file choosers #}

{# cancel dialog #}
<div class="modal hide fade in" id="cancel-modal">
  <div class="modal-header">
    <a class="close" data-dismiss="modal">&times;</a>
    <h3>Cancel Editing</h3>
  </div>
  <div class="modal-body">
    Are you sure you want to cancel editing this app page? All unsaved changes will be lost.
  </div>
  <div class="modal-footer">
    <a href="{% url 'app_page' app.name %}" class="btn btn-danger">Yes, Discard Changes</a>
    <a href="#" class="btn" data-dismiss="modal">No, Continue Editing</a>
  </div>
</div>
{# end cancel dialog #}

{# save dialog #}
<div class="modal hide fade in" id="save-modal">
  <div class="modal-header">
    <h3>Saving App Page...</h3>
  </div>
  <div class="modal-body">
  </div>
</div>
{# end save dialog #}

{# messages popup #}
<script type="text/html" id="cy-msg-tmpl">
<div class="alert alert-${ type }">
  <a class="close">&times;</a>
  ${ msg }
</div>
</script>
{# end messages popup #}

{# tag template #}
<script type="text/html" id="cy-tag-tmpl">
<span class="cy-app-tag">
  <span class="cy-app-tag-name">${ tag }</span>
  <span class="cy-app-tag-remove">&times;</span>
</span>
</script>
{# end tag template #}
    
{# author row template #}
<script type="text/html" id="cy-author-row-tmpl">
<tr class="cy-author-row">
  <td><input class="cy-app-author-name" type="text" value="${ name }"</td>
  <td><input class="cy-app-author-institution" type="text" value="${ institution }"</td>
  <td><button class="btn btn-small"><i class="icon-trash"></i> Delete</button></td>
</tr>
</script>
{# end author row template #}
    
{# add tag dialog template #}
<script type="text/html" id="cy-tag-add-popover-html">
<div id="cy-tag-add-popover">
  <ul class="unstyled">
    {% for tag in all_tags %}
    <li><a>{{ tag }}</a></li>
    {% endfor %}
  </ul>
  <div>
    <form class="form-inline" onSubmit="return false;">
      Other:
      <input type="text" class="input-small">
      <button class="btn btn-small disabled">Add</button>
    </form>
  </div>
</div>
</script>
{# end add tag dialog template #}

{# add editor dialog template #}
<script type="text/html" id="cy-editor-add-popover-html">
<div id="cy-editor-add-popover">
  <div class="alert alert-error">
    Email is invalid.
  </div>
  <form class="form-inline error" onSubmit="return false;">
    Email:
    <input type="text" class="input-small">
    <button class="btn btn-small disabled">Add</button>
  </form>
</div>
</script>
{# end add editor dialog template #}
    
<script type="text/javascript" src="{% get_static_prefix %}apps/js/app_page_edit.js"></script>
    
<script type="text/javascript">
$('[rel=tooltip]').tooltip();

{% if not app.has_releases %}
AppPageEdit.encourage_cy3_port();
{% endif %}

{% if release_uploaded %}
CyMsgs.add_msg('Your release has been uploaded! Click the "Release History" tab to see your releases and to add release notes.', 'success');
{% endif %}

AppPageEdit.set_max_file_img_size({{ max_file_img_size_b }});
AppPageEdit.setup_text_fields();
AppPageEdit.setup_icon_selection({{ max_icon_dim_px }});

AppPageEdit.setup_add_tag_btn();
{% if app.tags %}
{% for tag in app.tags.all %}
AppPageEdit.add_tag('{{ tag.fullname|escapejs}}', false);
{% endfor %}
{% endif %}

AppPageEdit.setup_screenshot_btns({{ thumbnail_height_px }});
{% if app.screenshot_set.all %}
{% for screenshot in app.screenshot_set.all %}
AppPageEdit.add_screenshot('{{ screenshot.thumbnail.url|escapejs }}').attr('backend_id', '{{screenshot.id}}');
{% endfor %}
{% endif %}

AppPageEdit.setup_details();
AppPageEdit.set_app_page_url("{% url 'app_page' app.name %}");
AppPageEdit.set_loading_icon_url('{% get_static_prefix %}common/img/loading_small.gif');

AppPageEdit.setup_add_editor_btn();
{% for editor in app.editors.all %}
AppPageEdit.add_editor('{{ editor.email|escapejs }}', '{{ editor.username|escapejs }}', false);
{% endfor %}

AppPageEdit.setup_author_add_btn();
{% for author in app.ordered_authors %}
AppPageEdit.add_author('{{ author.name }}', {% if author.institution %}'{{ author.institution }}'{% else %}null{% endif %});
{% endfor %}
$(function() {
  AppPageEdit.setup_authors_typeahead();
  AppPageEdit.setup_authors_dnd();
});

{% if app.has_releases %}
AppPageEdit.setup_release_notes();
{% endif %}

AppPageEdit.setup_cancel_btn();
AppPageEdit.setup_save_btn();
</script>
{% endblock %}