<metal:block i18n:domain="schooltool.cando"
             tal:define="skillsets view/skillsets">
  <form tal:attributes="action request/URL">
    <script type="text/javascript">
      $(document).ready(function() {
          // accordion setup
          $( ".skillsets-selection table" ).accordion({
              header: 'h2',
              active: false,
              collapsible: true,
              autoHeight: false
          });
      });
    </script>
    <div class="skillsets-selection skillsets-selection-remove">
      <table class="form-fields">
        <thead>
          <tr>
            <th i18n:translate="">Title</th>
            <th i18n:translate="">Skills</th>
            <th>
              <span i18n:translate="">Remove</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"
             value="Submit" i18n:attributes="value submit-button"
             tal:condition="skillsets" />
      <input type="submit" class="button-cancel" name="CANCEL"
             value="Cancel" i18n:attributes="value cancel-button" />
    </div>
  </form>
</metal:block>
