## -*- 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 (Depreciated)</h2>

      <p>The wrapping <code>.field</code> also gets the class
         <code>.field-sm</code>.</p>

      <p>Buttons get additional the class <code>.btn-sm</code>.</p>


      <div class="bs-example">
        <form method='post' action='none'>
          <div class='form'>
            <div class='fields'>

              <div class='field field-sm'>
                <div class='label'>
                  <label for='example_input'>Example input label:</label>
                </div>
                <div class='input'>
                  <input id="example_input" type="text" placeholder="Example input">
                </div>
              </div>

              <div class='field field-sm'>
                <div class='label'>
                  <label for='example_input_ro'>Example input readonly:</label>
                </div>
                <div class='input'>
                  <input id="example_input_ro" type="text" readonly="readonly" placeholder="Example input">
                </div>
              </div>

              <div class='field field-sm'>
                <div class='label'>
                  <label for='example_select'>Example select input:</label>
                </div>
                <div class="select">
                    <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>
                </div>
              </div>
              <script>
              $(document).ready(function() {
                  $('#example_select').select2({
                      containerCssClass: 'drop-menu',
                      dropdownCssClass: 'drop-menu-dropdown',
                      dropdownAutoWidth: true,
                      minimumResultsForSearch: -1
                  });
              });
              </script>

              <div class='field field-sm'>
                <div class='label'>
                  <label for='example_checkbox'>Example checkbox:</label>
                </div>
                <div class="checkboxes">
                  <div class="checkbox">
                    <input id="example_checkbox" type="checkbox">
                    <label for="example_checkbox">Label of the checkbox</label>
                  </div>
                </div>
              </div>

              <div class='field field-sm'>
                <div class='label'>
                  <label for='example_checkboxes'>Example multiple checkboxes:</label>
                </div>
                <div class="checkboxes">
                  <div class="checkbox">
                    <input id="example_checkboxes_01" type="checkbox">
                    <label for="example_checkboxes_01">Label of the first checkbox</label>
                  </div>
                  <div class="checkbox">
                    <input id="example_checkboxes_02" type="checkbox">
                    <label for="example_checkboxes_02">Label of the first checkbox</label>
                  </div>
                  <div class="checkbox">
                    <input id="example_checkboxes_03" type="checkbox">
                    <label for="example_checkboxes_03">Label of the first checkbox</label>
                  </div>
                </div>
              </div>


              <div class='field field-sm'>
                <div class='label'>
                  <label for='example_checkboxes'>Example multiple checkboxes:</label>
                </div>
                ## TODO: johbo: This is off compared to the checkboxes
                <div class="radios">
                  <label><input type="radio" checked="checked" value="hg.create.repository" name="default_repo_create" id="default_repo_create_hgcreaterepository">Enabled</label>
                  <label><input type="radio" value="hg.create.none" name="default_repo_create" id="default_repo_create_hgcreatenone">Disabled</label>
                  <span class="help-block">
                    Permission to allow repository creation. This includes ability to create
                    repositories in root level. If this option is disabled admin of
                    repository group can still create repositories inside that
                    repository group.
                  </span>
                </div>
              </div>

              <div class="buttons">
                <input type="submit" value="Save" id="example_save" class="btn btn-sm">
                <input type="reset" value="Reset" id="example_reset" class="btn btn-sm">
              </div>

            </div>
          </div>
        </form>
      </div>




      <h2>Help text in form elements</h2>

      <div class="bs-example">
        <form method='post' action=''>
          <div class='form'>
            <div class='fields'>

              <div class='field field-sm'>
                <div class='label'>
                  <label for='02_example_input'>Example input label:</label>
                </div>
                <div class='input'>
                  <input id="02_example_input" type="text" placeholder="Placeholder text">
                  <span class="help-block">
                    Example help text for this input element. This help text
                    will be shown under the input element itself. It can be
                    so long that it will span multiple lines.
                  </span>
                </div>
              </div>

              <div class='field field-sm'>
                <div class='label'>
                  <label for='02_example_checkbox'>Example checkbox with help block:</label>
                </div>
                <div class="checkboxes">
                  <div class="checkbox">
                    <input id="02_example_checkbox" type="checkbox">
                    <label for="02_example_checkbox">Label of the checkbox</label>
                  </div>
                  <span class="help-block">
                    Example help text for this checkbox element. This help text
                    will be shown under the checkbox element itself. It can be
                    so long that it will span multiple lines.
                  </span>
                </div>
              </div>


              <div class='field field-sm'>
                <div class='label'>
                  <label>Multiple checkboxes:</label>
                </div>
                <div class="checkboxes">
                  <div class="checkbox">
                    <input id="02_example_checkboxes_01" type="checkbox">
                    <label for="02_example_checkboxes_01">Label of the first checkbox</label>
                  </div>
                  <div class="checkbox">
                    <input id="02_example_checkboxes_02" type="checkbox">
                    <label for="02_example_checkboxes_02">Label of the first checkbox</label>
                  </div>
                  <div class="checkbox">
                    <input id="02_example_checkboxes_03" type="checkbox">
                    <label for="02_example_checkboxes_03">Label of the first checkbox</label>
                  </div>
                  <span class="help-block">
                    Example help text for this checkbox element. This help text
                    will be shown under the checkbox element itself. It can be
                    so long that it will span multiple lines.
                  </span>
                </div>
              </div>


            </div>
          </div>
        </form>
      </div>




      <h2>Error messages</h2>

      <div class="bs-example">
        <form method='post' action=''>
          <div class='form'>
            <div class='fields'>

              <div class='field field-sm'>
                <div class='label'>
                  <label for='04_example_input'>Example input label:</label>
                </div>
                <div class='input'>
                  <input id="04_example_input" type="text" placeholder="Example input"/>
                  <span class="error-message">
                    If form validation fails, some input fields can show an
                    error message close to the field.
                  </span>
                </div>
              </div>

            </div>
          </div>
        </form>
      </div>


      <h2>Fields with buttons</h2>

      <div class="bs-example">
        <form method='post' action=''>
          <div class='form'>
            <div class='fields'>

              <div class='field field-sm'>
                <div class='label'>
                  <label for='05_example_input'>Example input label:</label>
                </div>
                <div class='input'>
                  <input id="05_example_input" type="text" readonly="readonly" placeholder="Example input">
                  <span class="btn action_button btn-x">
                    <i class="icon-remove"></i>
                    delete
                  </span>
                  <span class="help-block">
                    Used if there is a list of values and the user can remove
                    single entries.
                  </span>
                </div>
              </div>


              <div class='field field-sm'>
                <div class='label'>
                  <label for='05_example_input'>Example input label:</label>
                </div>
                <div class='input'>
                  <input id="05_example_input" type="text" readonly="readonly" placeholder="Example input">
                  <span title="Click to unlock. You must restart RhodeCode in order to make this setting take effect."
                        class="tooltip" id="path_unlock"
                        tt_title="Click to unlock. You must restart RhodeCode in order to make this setting take effect.">
                    <div class="btn btn-default">
                      <span><i class="icon-lock" id="path_unlock_icon"></i></span>
                    </div>
                  </span>
                  <span class="help-block">
                    Used together with locked fields, the user has to first
                    unlock and afterwards it is possible to change the value.
                  </span>
                </div>
              </div>

            </div>
          </div>
        </form>
      </div>




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