<metal:block i18n:domain="schooltool.cando"
             tal:define="skillsets view/skillsets">
  <form tal:attributes="action request/URL">
    <input type="hidden" name="node_id"
           tal:attributes="value request/node_id" />
    <script type="text/javascript">
      $(document).ready(function() {
          // accordion setup
          $( ".skillsets-selection table" ).accordion({
              header: 'h2',
              active: false,
              collapsible: true,
              autoHeight: false
          });
      });
    </script>
    <div class="status" tal:condition="view/error">
      <div class="summary ui-state-error ui-corner-all">
        <span class="ui-icon ui-icon-alert">icon</span>
        <tal:block i18n:translate="">
          You must select at least one skill set.
        </tal:block>
      </div>
    </div>
    <div class="skillsets-selection">
      <table class="form-fields">
        <thead>
          <tr>
            <th i18n:translate="">Title</th>
            <th i18n:translate="">Skills</th>
            <th>
              <span i18n:translate="">Add</span>
              <input class="select-all" type="checkbox" name="select_all"
                     onclick="return ST.cando.column_select_all(this);" />
            </th>
          </tr>
        </thead>
        <tbody>
          <tr tal:repeat="skillset skillsets">
            <tal:block define="skills skillset/skills">
              <td>
                <h2>
                  <tal:block condition="skillset/label">
                    <tal:block content="skillset/label" />:
                  </tal:block>
                  <tal:block content="skillset/title" />
                </h2>
                <div>
                  <ul class="skills">
                    <li tal:repeat="skill skills"
                        tal:attributes="class skill/css_class">
                      <tal:block tal:content="skill/title" />
                    </li>
                  </ul>
                </div>
              </td>
              <td tal:content="python:len(skills)" />
              <td>
                <input type="checkbox" name="selected_skillsets"
                       tal:attributes="value skillset/id;
                                       checked skillset/checked;" />
              </td>
            </tal:block>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="buttons">
      <input type="submit" class="button-ok" name="SUBMIT_BUTTON"
             onclick="return ST.dialogs.submit(this, this);"
             value="Submit" i18n:attributes="value submit-button"
             tal:condition="skillsets" />
      <input type="submit" class="button-cancel" name="CANCEL"
             onclick="return ST.dialogs.close(this);"
             value="Cancel" i18n:attributes="value cancel-button" />
    </div>
  </form>
</metal:block>
