<!doctype html>
<html lang="en">
  <head>
    {{> head title="Elements" }}
    <style>
      .row {
        align-items: flex-end;
        margin-bottom: 50px;
      }
      .col:first-child {
        line-height: 40px;
      }
      .col-header {
        font-size: 16px;
        font-weight: bold;
      }
      .col-state {
        color: #ccc;
        font-size: 12px;
        font-weight: bold;
      }
      .col-with-error {
        margin-bottom: 24px;
      }
      .form-row{
        margin-bottom: 0;
      }

      /* Used only for emulation hover state on this page for demonstration purposes */
      .tbx_hover,
      .ddn_hover select,
      .rbn_hover ins,
      .chb_hover ins {
        border-color: #0277bd;
      }
      .chb_focus ins::before {
        content: '';
        background: rgba(0, 0, 0, .2);
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
    </style>
  </head>
  <body>
    <h1>Elements</h1>
    <div class="container">
      <form>
        <div class="row">
          <div class="col col-header">Input fields & Dropdowns</div>
          <div class="col col-state">Normal</div>
          <div class="col col-state">Hover / Focus</div>
          <div class="col col-state">Not-active</div>
        </div>
        <div class="row">
          <div class="col">e-inputfield</div>
          <div class="col">
            <input type="text" class="tbx">
          </div>
          <div class="col col-hover">
            <input type="text" class="tbx">
          </div>
          <div class="col">
            <input type="text" class="tbx" disabled>
          </div>
        </div>
        <div class="row">
          <div class="col">e-inputfield-filed</div>
          <div class="col">
            <input type="text" class="tbx" value="Text info">
          </div>
          <div class="col col-hover">
            <input type="text" class="tbx" value="Text info">
          </div>
          <div class="col">
            <input type="text" class="tbx" value="Text info" disabled>
          </div>
        </div>
        <div class="row">
          <div class="col">e-inputfield-titled</div>
          <div class="col">
            {{> form-row id="i1" label="Title"}}
          </div>
          <div class="col col-hover">
            {{> form-row id="i2" label="Title"}}
          </div>
          <div class="col">
            {{> form-row id="i3" label="Title" disabled="true"}}
          </div>
        </div>
        <div class="row">
          <div class="col col-with-error">e-inputfield-titled-filed-error</div>
          <div class="col">
            {{> form-row id="i4" label="Title" value="Text info" error="Error message here"}}
          </div>
          <div class="col col-hover">
            {{> form-row id="i5" label="Title" value="Text info" error="Error message here"}}
          </div>
          <div class="col">
            {{> form-row id="i6" label="Title" value="Text info" error="Error message here" disabled="true"}}
          </div>
        </div>
        <div class="row">
          <div class="col">e-inputfield-titled-description</div>
          <div class="col">
            {{> form-row id="i7" label="Title" info="Description text here"}}
          </div>
          <div class="col col-hover">
            {{> form-row id="i8" label="Title" info="Description text here"}}
          </div>
          <div class="col">
            {{> form-row id="i9" label="Title" info="Description text here" disabled="true"}}
          </div>
        </div>
        <div class="row">
          <div class="col">e-inputfield-titled-required</div>
          <div class="col">
            {{> form-row id="i10" label="Title" info="Description text here" required="true"}}
          </div>
          <div class="col col-hover">
            {{> form-row id="i11" label="Title" info="Description text here" required="true"}}
          </div>
          <div class="col">
            {{> form-row id="i12" label="Title" info="Description text here" required="true" disabled="true"}}
          </div>
        </div>
        <div class="row">
          <div class="col">e-dropdown</div>
          <div class="col">
            {{> dropdown id="d1" placeholder="Please select"}}
          </div>
          <div class="col col-hover">
            {{> dropdown id="d2" placeholder="Please select"}}
          </div>
          <div class="col">
            {{> dropdown id="d3" placeholder="Please select" disabled="true"}}
          </div>
        </div>
        <div class="row">
          <div class="col">e-dropdown-titled</div>
          <div class="col">
            {{> form-row dropdown="true" label="Title" id="d4" placeholder="Please select"}}
          </div>
          <div class="col col-hover">
            {{> form-row dropdown="true" label="Title" id="d5" placeholder="Please select"}}
          </div>
          <div class="col">
            {{> form-row dropdown="true" label="Title" id="d6" placeholder="Please select" disabled="true"}}
          </div>
        </div>
        <div class="row">
          <div class="col col-with-error">e-dropdown-titled-error</div>
          <div class="col">
            {{> form-row dropdown="true" label="Title" id="d7" placeholder="Please select" error="Error message here"}}
          </div>
          <div class="col col-hover">
            {{> form-row dropdown="true" label="Title" id="d8" placeholder="Please select" error="Error message here"}}
          </div>
          <div class="col">
            {{> form-row dropdown="true" label="Title" id="d9" placeholder="Please select" disabled="true" error="Error message here"}}
          </div>
        </div>
        <div class="row">
          <div class="col"></div>
          <div class="col col-state">Normal</div>
          <div class="col col-state">Hover</div>
          <div class="col col-state">Selected</div>
          <div class="col col-state">Selected Hover</div>
          <div class="col col-state">Not Active</div>
          <div class="col col-state">Selected Not Active</div>
        </div>
        <div class="row">
          <div class="col">Radio buttons</div>
          <div class="col">
            {{> radiobutton label="Label" name="r1" id="r1"}}
          </div>
          <div class="col col-hover">
            {{> radiobutton label="Label" name="r1" id="r2"}}
          </div>
          <div class="col">
            {{> radiobutton label="Label" name="r2" id="r3" checked="true"}}
          </div>
          <div class="col col-hover">
            {{> radiobutton label="Label" name="r3" id="r4" checked="true"}}
          </div>
          <div class="col">
            {{> radiobutton label="Label" name="r4" id="r5" disabled="true"}}
          </div>
          <div class="col col-hover">
            {{> radiobutton label="Label" name="r4" id="r6" checked="true" disabled="true"}}
          </div>
        </div>
        <div class="row">
          <div class="col">Checkboxes</div>
          <div class="col">
            {{> checkbox label="Label" id="c1"}}
          </div>
          <div class="col col-hover">
            {{> checkbox label="Label" id="c2"}}
          </div>
          <div class="col">
            {{> checkbox label="Label" id="c3" checked="true"}}
          </div>
          <div class="col col-hover chb_focus">
            {{> checkbox label="Label" id="c4" checked="true"}}
          </div>
          <div class="col">
            {{> checkbox label="Label" id="c5" disabled="true"}}
          </div>
          <div class="col col-hover">
            {{> checkbox label="Label" id="c6" checked="true" disabled="true"}}
          </div>
        </div>
      </form>
    </div>
    {{> scripts}}
    <script>
      // Used only for emulation hover state on this page for demonstration purposes
      setTimeout(function(){
        $('.col-hover .tbx').addClass('tbx_hover');
        $('.col-hover .ddn').addClass('ddn_hover');
        $('.col-hover .rbn').addClass('rbn_hover');
        $('.col-hover .chb').addClass('chb_hover');
        $('.col-focus .chb').addClass('chb_focus');
      }, 400);
    </script>
  </body>
</html>