{extends "frame.tpl"}

{block "css-entry" append}
   {encore_entry_link_tags entry='board' build='admin'}
{/block}

{block "content"}
    <style type="text/css">
       /* todo remove */
       .board-html-components {
          background: #fff;
       }

       .board-html-components .toggle {
          height: 16px;
       }
    </style>
   {$color_class_table = [
      'primary',
      'secondary',
      'success',
      'info',
      'danger',
      'warning',
      'default'
   ]}

   {$size_class_table = [
      'default' => '',
      'small' => 'sm',
      'large' => 'lg'
   ]}

   <div class="container-fluid board-html-components">
      <div class="row">
         <div class="col-lg-12 m-b-1">
            <h2>Buttons</h2>
            {foreach $size_class_table as $id => $value}
               <div class="row">
                  <div class="col-lg-12 m-b-1">
                     <h4>{$id}</h4>
                     {foreach $color_class_table as $color}
                        <a href="" class="btn btn-{$color} btn-{$value}">{$color}</a>
                     {/foreach}
                     <a href="" class="btn btn-link btn-{$value}">link</a>
                     <a href="" class="btn btn-success-indeterminate">sucsess indeterminate</a>
                     <a href="" class="btn btn-danger-indeterminate">danger indeterminate</a>
                  </div>
               </div>
            {/foreach}

            <div class="row">
               <div class="col-lg-12 m-b-1">
                  <h4>Disabled</h4>
                  {foreach $color_class_table as $color}
                     <a href="" class="btn btn-{$color} disabled">{$color}</a>
                  {/foreach}
                  <a href="" class="btn btn-link disabled">link</a>
               </div>
            </div>
         </div>

         <div class="col-lg-12 m-b-1">
            <h2>Input group btn</h2>
            <div class="m-b-1">
               <div class="input-group-btn">
                  {foreach $color_class_table as $color}
                     <a href="" class="btn btn-{$color}"><i class="glyphicon glyphicon-copy"></i></a>
                  {/foreach}
               </div>
            </div>

            {foreach $color_class_table as $color}
               <div class="m-b-1">
                  <div class="input-group-btn">
                     {for $i = 1 to 5}
                        <a href="" class="btn btn-{$color}"><i class="glyphicon glyphicon-copy"></i></a>
                     {/for}
                  </div>
               </div>
            {/foreach}
         </div>

         <div class="col-lg-12 m-b-1">
            <h2>Button group</h2>
            <div class="m-b-1">
               <div class="btn-group">
                  {foreach $color_class_table as $color}
                     <a href="" class="btn btn-{$color}">{$color}</a>
                  {/foreach}
               </div>
            </div>

            {foreach $color_class_table as $color}
               <div class="m-b-1">
                  <div class="btn-group">
                     {for $i = 1 to 5}
                        <a href="" class="btn btn-{$color}">{$color}</a>
                     {/for}
                  </div>
               </div>
            {/foreach}
         </div>

         <div class="col-lg-12 m-b-1">
            <h2>Labels</h2>
            {foreach $size_class_table as $id => $value}
               <div class="row">
                  <div class="col-lg-12 m-b-1">
                     <h4>{$id}</h4>
                     {foreach $color_class_table as $color}
                        <span class="label label-{$color} label-{$value}">{$color}</span>
                     {/foreach}
                  </div>
               </div>
            {/foreach}
         </div>

         <div class="col-lg-12 m-b-1">
            <h2>Badges</h2>
             {foreach $size_class_table as $id => $value}
                <div class="row">
                   <div class="col-lg-12 m-b-1">
                      <h4>{$id}</h4>
                       {foreach $color_class_table as $color}
                          <span class="badge badge-{$color} badge-{$value}">{$color}</span>
                       {/foreach}
                      <span class="badge badge-success-indeterminate badge-{$value}">success indeterminate</span>
                      <span class="badge badge-danger-indeterminate badge-{$value}">danger indeterminate</span>
                   </div>
                </div>
             {/foreach}
            <h4>Pastel</h4>
             {foreach $size_class_table as $id => $value}
                <div class="row">
                   <div class="col-lg-12 m-b-1">
                      <h4>{$id}</h4>
                       {foreach $color_class_table as $color}
                          <span class="badge badge-pastel-{$color} badge-{$value}">{$color}</span>
                       {/foreach}
                   </div>
                </div>
             {/foreach}
         </div>

         <div class="col-lg-12 m-b-1">
            <h2>Well</h2>
            {foreach $size_class_table as $id => $value}
               <div class="well well-{$value}">
                  <span>{$id}</span>
               </div>
            {/foreach}
         </div>

         <div class="col-lg-12 m-b-1">
            <h2>Alerts</h2>
            {foreach $color_class_table as $color}
               {if $color == 'secondary'}{continue}{/if}
               <div class="alert alert-{$color} alert-dismissable">
                  <button type="button" class="close" data-dismiss="alert"><span class="bi bi-x"></span></button>
                  <p>A simple {$color} alert—check it out!</p>
                 {* <hr>
                  <p>{$color} <a href="" class="alert-link">link</a></p>*}
               </div>
            {/foreach}
         </div>

         <div class="col-xs-12 m-b-1">
            <h2>Checks, radios & toggles</h2>
            <div class="row">
               <div class="col-xs-1">
                  <div class="form-group">
                     <div class="checkbox">
                        <input type="checkbox" name="single_check_1" id="single_check_1">
                        <label for="single_check_1"></label>
                     </div>
                  </div>
                  <div class="form-group">
                     <div class="checkbox">
                        <input type="checkbox" name="single_check_checked_1" id="single_check_checked_1" checked>
                        <label for="single_check_checked_1"></label>
                     </div>
                  </div>
                  <div class="form-group">
                     <div class="checkbox">
                        <input type="checkbox" name="single_check_disabled_1" id="single_check_disabled_1" disabled>
                        <label for="single_check_disabled_1"></label>
                     </div>
                  </div>
                  <div class="form-group">
                     <div class="checkbox">
                        <input type="checkbox" name="single_check_checked_disabled_1" id="single_check_disabled_checked_1" checked disabled>
                        <label for="single_check_disabled_checked_1"></label>
                     </div>
                  </div>
               </div>
               <div class="col-xs-1">
                  <div class="form-group">
                     <div class="radio">
                        <input type="radio" name="single_radio_1" id="single_radio_1">
                        <label for="single_radio_1"></label>
                     </div>
                  </div>
                  <div class="form-group">
                     <div class="radio">
                        <input type="radio" name="single_radio_checked_1" id="single_radio_checked_1" checked>
                        <label for="single_radio_checked_1"></label>
                     </div>
                  </div>
                  <div class="form-group">
                     <div class="radio">
                        <input type="radio" name="single_radio_disable_1" id="single_radio_disable_1" disabled>
                        <label for="single_radio_disable_1"></label>
                     </div>
                  </div>
                  <div class="form-group">
                     <div class="radio">
                        <input type="radio" name="single_radio_checked_disable_1" id="single_radio_checked_disable_1" checked disabled>
                        <label for="single_radio_checked_disable_1"></label>
                     </div>
                  </div>
               </div>
               <div class="col-xs-1">
                  <div class="form-group">
                      {print_toggle name='single_toggle'}
                  </div>
                  <div class="form-group">
                      {print_toggle name='single_toggle' value=1}
                  </div>
                  <div class="form-group">
                      {print_toggle name='single_toggle' disabled=1}
                  </div>
                  <div class="form-group">
                      {print_toggle name='single_toggle' value=1 disabled=1}
                  </div>
               </div>
               <div class="col-xs-2">
                  <div class="form-group">
                     <div class="checkbox">
                        <input type="checkbox" name="single_check" id="single_check">
                        <label for="single_check">Default checkbox</label>
                     </div>
                  </div>
                  <div class="form-group">
                     <div class="checkbox">
                        <input type="checkbox" name="single_check_checked" id="single_check_checked" checked>
                        <label for="single_check_checked">Checked checkbox</label>
                     </div>
                  </div>
                  <div class="form-group">
                     <div class="checkbox">
                        <input type="checkbox" name="single_check_checked" id="single_check_checked" disabled>
                        <label for="single_check_checked">Default checkbox</label>
                     </div>
                  </div>
                  <div class="form-group">
                     <div class="checkbox">
                        <input type="checkbox" name="single_check_checked_disabled" id="single_check_checked_disabled" checked disabled>
                        <label for="single_check_checked_disabled">Checked checkbox</label>
                     </div>
                  </div>
               </div>
               <div class="col-xs-2">
                  <div class="form-group">
                     <div class="radio">
                        <input type="radio" name="single_radio" id="single_radio">
                        <label for="single_radio">Default radio</label>
                     </div>
                  </div>
                  <div class="form-group">
                     <div class="radio">
                        <input type="radio" name="single_radio_checked" id="single_radio_checked" checked>
                        <label for="single_radio_checked">Checked radio</label>
                     </div>
                  </div>
                  <div class="form-group">
                     <div class="radio">
                        <input type="radio" name="single_radio_disable" id="single_radio_disable" disabled>
                        <label for="single_radio_disable">Default radio</label>
                     </div>
                  </div>
                  <div class="form-group">
                     <div class="radio">
                        <input type="radio" name="single_radio_checked_disable" id="single_radio_checked_disable" checked disabled>
                        <label for="single_radio_checked_disable">Checked radio</label>
                     </div>
                  </div>
               </div>
               <div class="col-xs-2">
                  <div class="form-group">
                     <div class="d-flex align-items-center">
                         {print_toggle name='single_toggle'}<label>Default toggle</label>
                     </div>
                  </div>
                  <div class="form-group">
                     <div class="d-flex align-items-center">
                         {print_toggle name='single_toggle' value=1}<label>Checked toggle</label>
                     </div>
                  </div>
                  <div class="form-group">
                     <div class="d-flex align-items-center">
                         {print_toggle name='single_toggle' disabled=1}<label>Default toggle</label>
                     </div>
                  </div>
                  <div class="form-group">
                     <div class="d-flex align-items-center">
                         {print_toggle name='single_toggle' value=1 disabled=1}<label>Checked toggle</label>
                     </div>
                  </div>
               </div>
            </div>
         </div>

         <div class="col-lg-12">
            <h2>Inputs</h2>
            {foreach $size_class_table as $id => $value}
               <input type="text" class="form-control input-{$value} m-b-1" placeholder="{$id}">
            {/foreach}
         </div>

         <div class="col-lg-12 m-b-1">
            <h2>Panel</h2>
             {foreach $color_class_table as $color}
                 <div class="m-b-1">
                    <div class="wpj-panel wpj-panel-{$color}">
                       <div class="wpj-panel-heading">
                          <div class="row">
                             <div class="col-md-3">{$color}</div>
                             <div class="col-md-9"></div>
                          </div>
                       </div>
                       <div class="wpj-panel-body">
                          <p>Test panel</p>
                       </div>
                    </div>
                 </div>
             {/foreach}
         </div>


         {*<div class="col-lg-12 m-b-1">
            <h2>Panel</h2>
            <div class="panel panel-default">
               <div class="panel-heading">Panel Heading</div>
               <div class="panel-body">Panel Content</div>
               <div class="panel-body">Panel Content</div>
               <div class="panel-body">Panel Content</div>
            </div>

            <div class="panel-group">
               <div class="panel panel-default">
                  <div class="panel-body">Panel Content</div>
               </div>
               <div class="panel panel-default">
                  <div class="panel-body">Panel Content</div>
               </div>
            </div>

         </div>
         *}
         <div class="col-lg-12 m-b-1">
            <h2>List group</h2>
            <div class="wpj-list-group">
               <div class="wpj-list-group-item">First item</div>
               <div class="wpj-list-group-item">Second item</div>
               <div class="wpj-list-group-item">Third item</div>
            </div>
            <h4>Themes List group</h4>
            <div class="wpj-list-group">
                {foreach $color_class_table as $color}
                   <div class="wpj-list-group-item wpj-list-group-item-{$color}">{$color}</div>
                {/foreach}
            </div>
         </div>

      </div>
   </div>

{/block}

{block "js-onready" append}
   {encore_entry_script_tags entry='board' build='admin'}
{/block}
