{% extends "baseprojectpage.html" %}
{% load projecttags %}
{% load humanize %}
{% load static %}

{% block localbreadcrumb %}
<li>All compatible recipes</li>
{% endblock %}

{% block projectinfomain %}

<script src="{% static 'js/layerBtn.js' %}"></script>
<script>

  $(document).ready(function (){
    var ctx = {
      projectLayers : {{projectlayerset}},
    };

    try {
      layerBtnsInit(ctx);
    } catch (e) {
      document.write("Sorry, An error has occurred loading this page");
      console.warn(e);
    }
  });
</script>


<div class="page-header">
  <h1>
  {% if request.GET.filter and objects.paginator.count >  0 or request.GET.search and objects.paginator.count >  0 %}
      {{objects.paginator.count}} recipe{{objects.paginator.count|pluralize}} found
  {% elif request.GET.filter and objects.paginator.count ==  0 or request.GET.search and objects.paginator.count == 0 %}
      No recipes found
  {%else%}
      All compatible recipes
  {%endif%}
  <i class="icon-question-sign get-help heading-help" title="This page lists all the recipes compatible with the release selected for this project, which is {{project.release.description}}"></i>
  </h1>
</div>

<div id="zone1alerts" style="display:none">
  <div class="alert alert-info lead">
    <button type="button" class="close" id="hide-alert">&times;</button>
    <span id="alert-msg"></span>
  </div>
</div>
{% if objects.paginator.count == 0 %}
  {% if request.GET.filter or request.GET.search %}
  <div class="row-fluid">
      <div class="alert">
        <form class="no-results input-append" id="searchform">
            <input id="search" name="search" class="input-xxlarge" type="text" value="{{request.GET.search}}"/>{% if request.GET.search %}<a href="javascript:$('#search').val('');searchform.submit()" class="add-on btn" tabindex="-1"><i class="icon-remove"></i></a>{% endif %}
            <button class="btn" type="submit" value="Search">Search</button>
            <button class="btn btn-link" onclick="javascript:$('#search').val('');searchform.submit()">Show all recipes</button>
        </form>
      </div>
  </div>
  {% else %}
    <div class="alert alert-info lead">
      <p>Toaster has no recipe information. To generate recipe information you can:</p>
      <ul>
       <li><a href="http://www.yoctoproject.org/docs/latest/toaster-manual/toaster-manual.html#layer-source">Configure a layer source</a></li>
       <li><a href="{% url 'importlayer' %}">Import a layer</a>, then run a build</li>
      </ul>
    </div>
  {% endif %}

{% else %}

{% include "basetable_top.html" %}
    {% for o in objects %}
    <tr class="data">
        <td class="target">
                {{o.name}}
                <a target="_blank" href="{{o.get_layersource_view_url}}"><i class="icon-share get-info"></i></a>
        </td>
        <td class="version">{{o.version}}</td>
        <td class="description">{% if o.description %}{{o.description}}{% else %}{{o.summary}}{%endif%}</td>
        <td class="recipe-file">
                <code>{{o.file_path}}</code>
                <a href="{{o.vcs_link_url}}" target="_blank"><i class="icon-share get-info"></i></a>
        </td>
        <td class="target-section">{{o.section}}</td>
        <td class="license">{{o.license}}</td>
        <td class="layer"><a href="{% url 'layerdetails' o.preffered_layerversion.id%}">{{o.preffered_layerversion.layer.name}}</a></td>
        <td class="branch">
        {% if o.preffered_layerversion.up_branch %}
            {{o.preffered_layerversion.up_branch.name}}
        {% else %}
        <a class="btn"
                data-content="<ul class='unstyled'>
                  <li>{{o.layer_version.commit}}</li>
                </ul>">
                {{o.layer_version.commit|truncatechars:13}}
            </a>
            {% endif %}
        </td>
        <td class="add-layer" value="{{o.pk}}">
          <a href="{% url 'project' project.id %}#/targetbuild={{o.name}}" class="btn btn-block layer-exists-{{o.preffered_layerversion.pk}}" style="display:none; margin-top: 5px;" >
            Build recipe
          </a>
          <button class="btn btn-block layerbtn layer-add-{{o.preffered_layerversion.pk}}" data-layer='{ "id": {{o.preffered_layerversion.pk}}, "name":  "{{o.preffered_layerversion.layer.name}}", "url": "{%url 'layerdetails' o.preffered_layerversion.pk%}"}' data-directive="add">
            <i class="icon-plus"></i>
            Add layer
            <i title="" class="icon-question-sign get-help" data-original-title="To build this target, you must first add the {{o.preffered_layerversion.layer.name}} layer to your project"></i></i>
        </button>
      </td>
    </tr>
    {% endfor %}
{% include "basetable_bottom.html" %}

    <!-- Modals -->

    <!-- 'Layer dependencies modal' -->
    <div id="dependencies_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-hidden="true">
        <form id="dependencies_modal_form">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
            <h3><span class="layer-name"></span> dependencies</h3>
        </div>
        <div class="modal-body">
            <p><strong class="layer-name"></strong> depends on some layers that are not added to your project. Select the ones you want to add:</p>
            <ul class="unstyled" id="dependencies_list">
            </ul>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" type="submit">Add layers</button>
            <button class="btn" type="reset" data-dismiss="modal">Cancel</button>
        </div>
        </form>
    </div>

{% endif %}

{% if project %}
<script>
</script>
{%endif%}

{% endblock %}