<div i18n:domain="schooltool">

<form method="POST" enctype="multipart/form-data" class="standalone"
      tal:attributes="action request/URL">

  <tal:block content="structure context/schooltool:content/import-description" />

  <fieldset name="select-mode">

    <legend><span i18n:translate="">Import source</span></legend>

    <div class="row">
      <div class="widget">
        <span class="option">
          <label>
            <input type="radio"
                   name="csv-input-mode"
                   tal:attributes="checked python:view.mode!='text' and 'checked'"
                   value="upload" />
            <span class="label" i18n:translate="">Upload CSV file</span>
          </label>
        </span>
        <span class="option">
          <label>
            <input type="radio"
                   tal:attributes="checked python:view.mode=='text' and 'checked'"
                   name="csv-input-mode"
                   value="text" />
            <span i18n:translate="">Enter CSV text</span>
          </label>
        </span>
      </div>
    </div>
  </fieldset>

  <script type="text/javascript">
    $(document).ready(function() {
      function update_fieldset(f){
        var mode = $(f).val();
        $('fieldset[name|=csv-mode]').hide().filter('fieldset[name=csv-mode-' + mode + ']').show();
      };
      var mode_field = $('input[name=csv-input-mode]');
      mode_field.change(function(){update_fieldset(this);});
      var active_field = $('input[name=csv-input-mode][checked=checked]');
      update_fieldset(active_field);
    });
  </script>

  <div class="status"
       tal:repeat="error view/errors">
    <div class="summary ui-state-error ui-corner-all">
      <span class="ui-icon ui-icon-alert">icon</span>
      <tal:block content="error">
        [error message]
      </tal:block>
    </div>
  </div>

  <fieldset name="csv-mode-upload">
    <legend><span i18n:translate="">Import CSV</span></legend>
    <div class="row">
      <div class="label">
        <label for="csvfile">
          <span i18n:translate="">Upload CSV file</span>
        </label>
      </div>
      <div class="widget">
        <input id="csvfile" type="file" name="csvfile"/>
      </div>
    </div>

    <div class="row">
      <div class="label">
        <label for="charset">
          <span i18n:translate="">Charset</span>
        </label>
      </div>
      <div class="widget">
        <select name="charset" class="select-widget">
          <option value="UTF-8" i18n:translate="">Unicode (UTF-8)</option>
          <option value="ISO-8859-1" i18n:translate="">Western (ISO-8859-1)</option>
          <option value="ISO-8859-15" i18n:translate="">Western (ISO-8859-15)</option>
          <option value="Windows-1252" i18n:translate="">Western (Windows-1252)</option>
          <option value="other" i18n:translate="">Other (please specify)</option>
        </select>
      </div>
    </div>
    <div class="row">
      <div class="label">
        <label for="other_charset">
          <span i18n:translate="">Other charset</span>
        </label>
      </div>
      <div class="widget">
        <input name="other_charset" type="text" />
      </div>
    </div>
  </fieldset>
  <fieldset name="csv-mode-text">
    <legend><span i18n:translate="">Import CSV</span></legend>
    <div class="row">
      <div class="label">
        <label for="csvtext">
          <span i18n:translate="">Enter CSV text</span>
        </label>
      </div>
      <div class="widget">
        <textarea name="csvtext" id="csvtext"
                  class="textarea-widget csvimport"
                  tal:content="view/csvtext|nothing"></textarea>
      </div>
    </div>
  </fieldset>
  <div class="buttons">
    <input name="UPDATE_SUBMIT" class="button-ok" type="submit"
           value="Submit" i18n:attributes="value submit-button" />
    <input name="UPDATE_CANCEL" class="button-cancel" type="submit"
           value="Cancel" i18n:attributes="value cancel-button" />
  </div>
</form>

</div>
