## -*- coding: utf-8 -*-
<%inherit file="/debug_style/index.html"/>

<%def name="breadcrumbs_links()">
    ${h.link_to(_('Style'), h.route_path('debug_style_home'))}
    &raquo;
    ${c.active}
</%def>


<%def name="real_main()">
<div class="box">
    <div class="title">
        ${self.breadcrumbs()}
    </div>

    <div class='sidebar-col-wrapper'>
    ${self.sidebar()}

      <div class="main-content">

        <h2>Simple form elements</h2>
        <p>When working with forms, please upgrade to this new form layout. See the depreciated forms pages for the previous layout.</p>
        <p>These forms are marked by the class <code>rcform</code>. See html for details on formatting. 
        </p>
        <p>Some other notes: The customized checkboxes and radio buttons use the label for styling. This has been disabled for lower versions of IE using the <code>:not()</code> selector. Select2 dropdowns need to be redone, but this may be in a later iteration.
        </p>

        <h2>Examples</h2>

          <form method='post' action='none' class="rcform">

            <fieldset>
              <legend>Dropdown:</legend>
              <div class="fields">
                <select id="example_select" >
                    <option value="#">${_('Templates...')}</option>
                    <option value="ga">Google Analytics</option>
                    <option value="clicky">Clicky</option>
                    <option value="server_announce">${_('Server Announcement')}</ option>
                </select>
                <script>
                  $(document).ready(function() {
                      $('#example_select').select2({
                          containerCssClass: 'drop-menu',
                          dropdownCssClass: 'drop-menu-dropdown',
                          dropdownAutoWidth: true,
                          minimumResultsForSearch: -1
                      });
                  });
                </script>
              </fields>
            </fieldset>

            <fieldset>
              <legend>Multiple Dropdowns in a list:</legend>
              <ul class="fields formlist">
                <li>
                  <select id="example_select3" >
                      <option value="#">${_('Templates...')}</option>
                      <option value="ga">Google Analytics</option>
                      <option value="clicky">Clicky</option>
                      <option value="server_announce">${_('Server Announcement')} </ option>
                  </select>
                  <script>
                    $(document).ready(function() {
                        $('#example_select3').select2({
                            containerCssClass: 'drop-menu',
                            dropdownCssClass: 'drop-menu-dropdown',
                            dropdownAutoWidth: true,
                            minimumResultsForSearch: -1
                        });
                    });
                  </script>
                </li>
                <li>
                  <select id="example_select4" >
                      <option value="#">${_('Templates...')}</option>
                      <option value="ga">Google Analytics</option>
                      <option value="clicky">Clicky</option>
                      <option value="server_announce">${_('Server Announcement')} </ option>
                  </select>
                  <script>
                    $(document).ready(function() {
                        $('#example_select4').select2({
                            containerCssClass: 'drop-menu',
                            dropdownCssClass: 'drop-menu-dropdown',
                            dropdownAutoWidth: true,
                            minimumResultsForSearch: -1
                        });
                    });
                  </script>
                </li>
                <li>
                  <select id="example_select5" >
                      <option value="#">${_('Templates...')}</option>
                      <option value="ga">Google Analytics</option>
                      <option value="clicky">Clicky</option>
                      <option value="server_announce">${_('Server Announcement')} </ option>
                  </select>
                  <script>
                    $(document).ready(function() {
                        $('#example_select5').select2({
                            containerCssClass: 'drop-menu',
                            dropdownCssClass: 'drop-menu-dropdown',
                            dropdownAutoWidth: true,
                            minimumResultsForSearch: -1
                        });
                    });
                  </script>
                </li>
              </ul>
            </fieldset>

            <fieldset>
              <legend>Dropdown with checkbox:</legend>
              <div class="fields">
                <select id="example_select2" >
                  <option value="#">${_('Some text...')}</option>
                  <option value="ga">A really long thing</option>
                  <option value="clicky">Repo Name</option>
                  <option value="server_announce">${_('Variable Item')}</option>
                </select>
                <input type="checkbox" name="size" id="size_1" value="small"/>
                <label for="size_1">Checkbox for something</label>\
                <span class="label">Checkbox for something</span>
                <span class="help-block">
                  Note: There is a very specific selector which centers the checkbox on the dropdown;
                  it requires that the script NOT be between the two.
                </span>
              </div>
                <script>
                  $(document).ready(function() {
                      $('#example_select2').select2({
                          containerCssClass: 'drop-menu',
                          dropdownCssClass: 'drop-menu-dropdown',
                          dropdownAutoWidth: true,
                          minimumResultsForSearch: -1
                      });
                  });
                </script>
            </fieldset>

            <fieldset>
              <legend>Radio Buttons:</legend>
              <div class="fields">
                <input type="radio" name="size" id="size_2" value="small"/>
                <label for="size_2">Radio one</label>
                <span class="label">Radio Button One</span>
                <input type="radio" name="size" id="size_3" value="small"/>
                <label for="size_3">Radio two</label>
                <span class="label">Radio Button Two</span>
                <input type="radio" checked name="size" id="size_4" value="small"/>
                <label for="size_4">Radio three</label>
                <span class="label">Radio Button Three</span>
              </div>
            </fieldset>

            <fieldset>
              <legend>Checkboxes with help text:</legend>
              <div class="fields">
                <input type="checkbox" name="size" id="size_5" value="small"/>
                <label for="size_5">Checkbox one</label>
                <span class="label">Checkbox One</span>
                <input type="checkbox" checked name="size" id="size_6" value="small"/>
                <label for="size_6">Checkbox two</label>
                <span class="label">Checkbox Two</span>
                <input type="checkbox" checked name="size" id="size_7" value="small"/>
                <label for="size_7">Checkbox three</label>
                <span class="label">Checkbox Three</span>
                <span class="help-block">
                  Help text can be put wherever needed. Inside of .fields, it is confined to the width of the input sections.
                </span>
              </div>
            </fieldset>

            <fieldset>
              <legend>Checkboxes as a list:</legend>
                <div class="fields">
                  <ul class="formlist">
                    <li>
                      <input type="checkbox" name="size" id="size_8" value="small "/>
                      <label for="size_8">Checkbox one</label>
                      <span class="label">Checkbox One</span>
                    </li>
                    <li>
                      <input type="checkbox" checked name="size" id="size_9"  value="    small"/>
                      <label for="size_9">Checkbox two</label>
                      <span class="label">Checkbox Two</span>
                    </li>
                    <li>
                      <input type="checkbox" checked name="size" id="size_10"   value="    small"/>
                      <label for="size_10">Checkbox three</label>
                      <span class="label">Checkbox Three</span>
                    </li>
                </ul>
                <span class="help-block">
                  In some instances, you may wish for dropdowns, checkboxes, or radio buttons to be in a list rather than inline. This is achieved using .formlist.
                </span>
              </div>
            </fieldset>

            <fieldset>
              <legend>Text Input:</legend>
              <div class="fields">
                <input id="example_input" type="text" placeholder="Example input">
                <input id="example_input" type="text" placeholder="Example input">
              </div>
            </fieldset>

            <fieldset>
              <legend>Textarea:</legend>
              <div class="fields">
                <textarea placeholder="This is a textarea."></textarea>
              </div>
            </fieldset>

            <fieldset>
              <legend>Some Inputs with a button:</legend>
              <div class="fields">
                <input class="disabled" id="paths_root_path" name="paths_root_path" readonly="readonly" size="59" type="text" value="Disabled input">
                <span id="path_unlock" class="tooltip" title="Click to unlock. You must restart RhodeCode in order to make this setting take effect.">
                  <div class="btn btn-default">
                      <span><i id="path_unlock_icon" class="icon-lock"></i></span>
                  </div>
                </span>
                <input id="paths_root_path" name="paths_root_path" size="59" type="text" placeholder="Input">
                <span class="btn btn-x" onclick="ajaxDeletePattern(11,'id11')">
                  Delete
                </span>
              </div>
            </fieldset>
  
            <fieldset class="select side-by-side-selector">
                  <div class="left-group">
                      <label class="text" >${_('Chosen group members')}</label>
                      <select id="users_group_members2" multiple size='8'>
                      </select>
                     <div class="btn" id="remove_all_elements2" >
                         ${_('Remove all elements')}
                         <i class="icon-chevron-right"></i>
                     </div>
                  </div>
                  <div class="middle-group">
                      <i id="add_element2" class="icon-chevron-left"></i>
                      <br />
                      <i id="remove_element2" class="icon-chevron-right"></i>
                  </div>
                  <div class="right-group">
                       <label class="text" >${_('Available members')}</label>
                        <select id="available_members2" multiple size='8'>
                            <option value="#">${_('Some example text...')}</option>
                            <option value="ga">A really long thing</option>
                            <option value="clicky">Repo Name</option>
                            <option value="server_announce">${_('Variable Item')}</option>
                        </select>
                       <div class="btn" id="add_all_elements2" >
                           <i class="icon-chevron-left"></i>${_('Add all elements')}
                       </div>
                  </div>
              </fieldset>
  
          <div class="buttons">
            <input type="submit" value="Save" id="example_save" class="btn">
            <input type="reset" value="Reset" id="example_reset" class="btn">
          </div>
  
          </form>

      </div>  <!-- .main-content  --> 
    </div>  <!-- .sidebar-col-wrappe  --> 
</div> <!-- .box -->
</%def>