[% WRAPPER layout.tt title=(create ? "New view" : "View $project.name:$view.name") %]
[% PROCESS common.tt %]
[% USE HTML %]


[% BLOCK renderJob %]
  <tr id="[% id %]" >
    <td>
      <button type="button" class="btn btn-warning" onclick='$(this).parents("tr").remove()'>
        <i class="icon-trash icon-white"></i>
      </button>
    </td>
    <td><input type="radio" id="[% "$baseName-primary" %]" name="primary" [% IF job.isprimary %]
      checked="checked" [% END %] [% HTML.attributes(value => "$n") %] /></td>
    <td><input type="text" class="string" [% HTML.attributes(id => "$baseName-name", name => "$baseName-name", value => "$job.jobset:$job.job") %] /></td>
    <td><input type="text" class="string" [% HTML.attributes(id => "$baseName-description", name => "$baseName-description", value => job.description) %] /></td>
    <td><input type="text" class="string" [% HTML.attributes(id => "$baseName-attrs", name => "$baseName-attrs", value => job.attrs) %] /></td>
  </tr>
[% END %]


<form class="form-horizontal" action="[% IF create %][% c.uri_for('/project' project.name 'create-view/submit') %][% ELSE %][% c.uri_for('/view' project.name view.name 'submit') %][% END %]" method="post">

<fieldset>

  <div class="control-group">
    <label class="control-label">Identifier</label>
    <div class="controls">
      <input type="text" class="span3" name="name" [% HTML.attributes(value => view.name) %]></input>
    </div>
  </div>

  <div class="control-group">
    <label class="control-label">Description</label>
    <div class="controls">
      <input type="text" class="span3" name="description" [% HTML.attributes(value => view.description) %]></input>
    </div>
  </div>

  <table class="table table-condensed table-striped">
    <thead>
      <tr>
        <th></th>
        <th>Primary job</th>
        <th>Job name</th>
        <th>Description</th>
        <th>Constraint</th>
      </tr>
    </thead>
    <tbody>
      [% n = 0 %]
      [% FOREACH j IN jobs %]
        [% INCLUDE renderJob baseName="job-$n" job=j %]
        [% n = n + 1 %]
      [% END %]
      <tr>
        <td colspan="5" style="text-align: center;"><button type="button" class="add-job btn btn-success"><i class="icon-plus icon-white"></i> Add a job</button></td>
      </tr>
    </tbody>
  </table>

  <div class="form-actions">
    <button type="submit" class="btn btn-primary">
      <i class="icon-ok icon-white"></i>
      [%IF create %]Create[% ELSE %]Apply changes[% END %]
    </button>
    [% IF !create %]
      <button id="delete-view" type="submit" class="btn btn-danger" name="submit" value="delete">
        <i class="icon-trash icon-white"></i>
        Delete this view
      </button>
      <script type="text/javascript">
        $("#delete-view").click(function() {
          return confirm("Are you sure you want to delete this view?");
        });
      </script>
    [% END %]
  </div>

</form>


<table class="template"> <!-- dummy wrapper needed because “hidden” trs are visible anyway -->
  [% INCLUDE renderJob job="" id="job-template" baseName="job-template" %]
</table>


<script type="text/javascript">
  $(document).ready(function() {
    var id = [% n %];

    $(".add-job").click(function() {
      var newnr = id++;
      var newid = "job-" + newnr;
      var x = $("#job-template").clone(true).attr("id", "").insertBefore($(this).parents("tr")).show();
      $("#job-template-name", x).attr("name", newid + "-name");
      $("#job-template-description", x).attr("name", newid + "-description");
      $("#job-template-attrs", x).attr("name", newid + "-attrs");
      $("#job-template-primary", x).attr("value", newnr);
      return false;
    });
  });
</script>


[% END %]