{% extends g.theme.master %}
{% do g.register_forge_css('css/hilite.css') %}
{% do g.register_app_css('css/tracker.css') %}

{% block title %}{{c.project.name}} / {{app.config.options.mount_label}} / Saved Search Bins{% endblock %}

{% block head %}
  <link rel="alternate" type="application/rss+xml" title="RSS" href="feed.rss"/>
  <link rel="alternate" type="application/atom+xml" title="Atom" href="feed.atom"/>
{% endblock %}

{% block header %}Saved Search Bins{% endblock %}

{% block content %}
  {% if bins.__len__() %}
  <form action="{{c.project.url()}}admin/{{app.config.options.mount_point}}/bins/update_bins" method="post" class="update_bins">
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Terms</th>
          <th>&nbsp;</th>
        </tr>
      </thead>
      <tbody class="bin-list">
        {% for bin in bins %}
          <tr{% if loop.index0 % 2 == 0 %} class="even"{% endif %}>
            <td class="view" {% if bin.error %}style="display:none"{% endif %}><a href="{{bin.url()}}">{{bin.summary}}</a></td>
            <td class="view" {% if bin.error %}style="display:none"{% endif %}>{{bin.terms}}</td>
            <td class="edit" style="{% if not bin.error %}display:none{% else %}vertical-align:top{% endif %}"><input type="text" name="bins-{{loop.index0}}.summary" value="{{bin.summary}}"></td>
            <td class="edit" {% if not bin.error %}style="display:none"{% endif %}>
                <input type="text" name="bins-{{loop.index0}}.terms" value="{{bin.terms}}">
                {% if bin.error %}<br/><span style="color:red">{{bin.error}}</span>{% endif %}
            </td>
            <td style="width:40px;">
              <a href="#" title="Delete" class="del_bin"><b data-icon="{{g.icons['delete'].char}}" class="ico {{g.icons['delete'].css}}"></b></a>
              <a href="#" title="Edit" class="edit_bin"><b data-icon="{{g.icons['pencil'].char}}" class="ico {{g.icons['pencil'].css}}"></b></a>
              <input type="hidden" name="bins-{{loop.index0}}.id" value="{{bin._id | string}}">
              <input type="hidden" name="bins-{{loop.index0}}.delete" value="False" class="delete_flag">
            </td>
          </tr>
        {% endfor %}
        {% set num_bins = bins.__len__() %}
        <tr class="new_bin" {% if not (new_bin and new_bin.error) %}style="display:none"{% endif %}>
            <td {% if new_bin and new_bin.error %}style="vertical-align:top"{% endif %}>
            <input type="hidden" name="bins-{{num_bins}}.id">
            <input type="hidden" name="bins-{{loop.index0}}.delete" value="False" class="delete_flag">
            <input type="text" name="bins-{{num_bins}}.summary" placeholder="Summary" {% if new_bin %}value="{{new_bin.summary}}"{% endif %}>
          </td>
          <td>
            <input type="text" name="bins-{{num_bins}}.terms" placeholder="Terms" {% if new_bin %}value="{{new_bin.terms}}"{% endif %}>
            {% if new_bin and new_bin.error %}<br/><span class="err" style="color:red">{{new_bin.error}}</span>{% endif %}
          </td>
          <td>&nbsp;</td>
        </tr>
      </tbody>
    </table>
    <div class="grid-16"><a href="#" class="btn add_bin grid-3" {% if errors %}style="display:none"{% endif %}>Add Bin</a></div>
    <div class="grid-16 save_controls" {% if not errors %}style="display:none"{% endif %}>
      <input type="submit" value="Save">
      {% if errors %}
        <a href="." class="btn link">Cancel</a>
      {% else %}
        <a href="#" class="btn link cancel_edit">Cancel</a>
      {% endif %}
    </div>
  </form>
  {% else %}
    No saved search bins have been created yet.
  {% endif %}
{% endblock %}

{% block extra_js %}
  <script type="text/javascript">
  $(document).ready(function(){
    $('form.update_bins').each(function(){
      var $form = $(this);
      var $new_row = $('tr.new_bin', $form);
      var $add_button = $('a.add_bin', $form);
      var $save_controls = $('div.save_controls', $form);
      $('a.add_bin').click(function(){
        $save_controls.show();
        $add_button.hide();
        $new_row.show();
        return false;
      });
      $('a.edit_bin').click(function(){
        var $row = $(this).closest('tr');
        $('td.view', $row).hide();
        $('td.edit', $row).show();
        $save_controls.show();
        $add_button.hide();
        $(this).css({opacity: 0.5});
        return false;
      });
      $('a.del_bin').click(function(){
        var $row = $(this).closest('tr');
        $('input.delete_flag', $row).val('True');
        $form.submit();
      });
      $('a.cancel_edit').click(function(){
        $('td.view', $form).show();
        $('td.edit', $form).hide();
        $save_controls.hide();
        $add_button.show();
        $new_row.hide();
        $('input', $new_row).val('');
        $('span.err', $new_row).html('');
        $('a.edit_bin').css({opacity: 1});
        return false;
      });
    });
  });
  </script>
{% endblock %}
