{% extends g.theme.master %}

{% do g.register_forge_css('css/forge/deck.css') %}
{% do g.register_forge_js('js/project_tools.js', location='body_js_tail') %}

{% block title %}{{c.project.name}} / Tools{% endblock %}

{% block header %}Tools{% endblock %}

{% block content %}
  <h3>Click to install</h3>
  <div class="nested-grid-container">
    {% for tool in installable_tools %}
      <span class="tcenter grid-4 installable_tool">
        <a class="install_trig" data-tool="{{ tool['name'] }}">
          <span class="tool_title">{{ tool['app'].tool_label }}{{' (%s)' % tool.app.status if tool.app.status != 'production' else ''}}</span><br />
          <img src="{{ g.theme.app_icon_url(tool['app'], 32) or 'unk.png' }}" alt="">
        </a>
      </span>
    {% endfor %}
    <span class="tcenter grid-4 installable_tool">
      <a class="install_trig" data-tool="">
        <span class="tool_title">Subproject</span><br />
        <img src="{{ g.theme.app_icon_url('subproject', 32) }}" alt="">
      </a>
    </span>
  </div>
  <form method="post" action="update_mounts" id="install_form" style="display:none">
    <input type="hidden" name="new.ordinal" value="{{installable_tools|length + c.project.direct_subprojects|length}}"/>
    <input type="hidden" name="new.ep_name" class="new_ep_name">
    <label class="grid-13">Label</label>
    <div class="grid-13"><input type="text" name="new.mount_label" class="new_mount_label"></div>
    <label class="grid-13">Mount Point</label>
    <div class="grid-13"><input type="text" name="new.mount_point" class="new_mount_point"></div>
    <div class="grid-13">&nbsp;</div>
    <hr>
    <div class="grid-13">&nbsp;</div>
    <div class="grid-13">
      <input type="submit" value="Save" name="new.install"> <a href="#" class="close btn link">Cancel</a>
    </div>
  </form>
  {{c.install_modal.display(content='<h1>Install <span id="install_tool_label">Tool</span></h1>')}}

<h3>Installed tools</h3>
<p>
    Sortable - define top menu order by moving tools with your mouse.
</p>
<div id="sortable" class="clearfix fourcol">
    {% for mount in mounts %}
        {% if 'ac' in mount %}
            {% set app = mount['ac'].load()(c.project, mount['ac']) %}
            {% set links = app.admin_menu() %}
            {% set label = mount['ac'].options['mount_label'] if mount['ac'].options['mount_label'] != 'Tool Name' else mount['ac'].options['mount_point'] %}
            <div class="fleft">
                <ul class="deck">
                    <li class="tcenter">
                        <span class="tool_title">{{ label }}</span><br />
                        <img src="{{ g.theme.app_icon_url(app, 48) }}" alt="">
                    </li>
                    {% for link in links %}
                    <li>
                        <a href="{{ link.url }}" class="{{ link.className }}">{{ link.label }}</a>
                    </li>
                    {% endfor %}
                    {% if app.uninstallable %}
                    <li>
                      <form method="post" action="update_mounts" id="mounts_edit_2-{{loop.index0}}">
                        <input type="hidden" class="mount_point"
                               name="tool-{{loop.index0}}.mount_point"
                               value="{{mount['ac'].options.mount_point}}"/>
                        <input name="tool-{{loop.index0}}.delete" type="hidden" value="Delete"/>
                        {% if mount['ac'].load().uninstallable %}
                          <a href="#" class="mount_delete">Delete</a>
                        {% endif %}
                      </form>
                    </li>
                    {% endif %}
                </ul>
                {% if not app.uninstallable %}
                  <input type="hidden" class="mount_point" value="{{mount['ac'].options.mount_point}}"/>
                {% endif %}
            </div>
        {% endif %}
        {% if 'sub' in mount and not mount['sub'].deleted %}
            <div class="fleft">
                <ul class="deck">
                    <li class="tcenter">
                        <span class="tool_name">{{ mount['sub'].name }}</span><br />
                        <img src="{{ g.theme.app_icon_url('subproject', 48) }}" alt="">
                    </li>
                    <li>
                      <form method="post" action="update_mounts" id="mounts_edit_2-{{loop.index0}}">
                          <input type="hidden" class="shortname"
                                 name="subproject-{{loop.index0}}.shortname"
                                 value="{{mount['sub'].shortname}}"/>
                          <input name="subproject-{{loop.index0}}.delete" type="hidden" value="Delete"/>
                          <a href="#" class="mount_delete">Delete</a>
                      </form>
                    </li>
                </ul>
            </div>
        {% endif %}
    {% endfor %}
    </div>
</div>
<form id="mount_delete_form" style="display:none">
  <div class="grid-13">Warning: This will destroy all data in this tool and is non reversable!</div>
  <div class="grid-13">&nbsp;</div>
  <hr>
  <div class="grid-13">&nbsp;</div>
  <div class="grid-13">
    <input type="button" value="Delete" class="continue_delete"> <input type="button" value="Cancel" class="cancel_delete close">
  </div>
</form>
{{c.admin_modal.display(content='<h1 id="popup_title"></h1><div id="popup_contents"></div>')}}
{{c.mount_delete.display(content='<h1>Confirm Delete</h1>')}}
<div><!--dummy-->

<h3 style="clear:left">Grouping</h3>
<form method="POST" action="configure_tool_grouping" id="configure_grouping_form">
    <label>Threshold for grouping tools by type:
        <input name="grouping_threshold" value="{{c.project.get_tool_data('allura', 'grouping_threshold', 1)}}"/>
    </label>
    <br/><input type="submit" value="Change"/>
</form>
{% endblock %}

{% block extra_js %}
<script type="text/javascript">
    var defaults = {
        {% for tool in installable_tools %}
        '{{tool.name}}':{'default_label':'{{tool.app.default_mount_label}}','default_mount':'{{tool.app.default_mount_point}}'}{% if not loop.last %},{% endif %}
        {% endfor %}
    };
</script>
{% endblock %}

{% block extra_css %}
<style type="text/css">
.pad .fourcol .fleft {
  min-height: 200px;
}

#configure_grouping_form {
    padding-left: 10px;
}
#configure_grouping_form input[name=grouping_threshold] {
    width: 1.5em;
}
</style>
{% endblock %}