{% extends "adminlte2/base.html" %}
{% load i18n %}


{% block breadcrumbs %}
  <ol class="breadcrumb">
    {% include "admin/partials/_breadcrumb_home.html" %}
    <li>
      {% trans 'Demo CSS' %}
    </li>
  </ol>
{% endblock breadcrumbs %}


{% block content %}
  <h1>Demo CSS</h1>

  {# Dropdown Menus #}
  <div class="box box-solid box-default">
    <div class="box-header with-border">
      <h3 class="box-title">Dropdown Menus</h3>
    </div>
    <div class="box-body">
      <div class="row">
        <div class="col-sm-12">
          <h4><i class="fa fa-list"></i> Dropdown Menus</h4>
        </div>
      </div>
    
      <div class="row">
          {% for bootstrap_type in bootstrap_types %}
            <div class="col-sm-2" style="margin-bottom:10px;">
              <div class="btn-group">
                <button type="submit" class="btn btn-{{ bootstrap_type }}" name="action" value="finalize">
                  {{ bootstrap_type }}
                </button>
                <button
                  type="button"
                  class="btn btn-{{ bootstrap_type }} dropdown-toggle"
                  data-toggle="dropdown" aria-haspop="true"
                  aria-expanded="false"
                >
                  <span class="caret"></span>
                  <span class="sr-only">Toggle Dropdown</span>
                </button>
                
                <ul class="dropdown-menu dropdown-menu-{{ bootstrap_type }}">
                  <li><a href="#">Default Anchor 1</a></li>
                  <li><a href="#">Default Anchor 2</a></li>
                  <li><a href="#">Default Anchor 3</a></li>
                  <li><a href="#"><i class="fa fa-plus fa-fw"></i> Default Anchor w/ Icon</a></li>
                  <li><a href="#"><i class="fa fa-minus fa-fw"></i> Default Anchor w/ Icon</a></li>
                  <li role="separator" class="divider"></li>
                  <li>
                    <input
                      type="submit" class="btn btn-{{ bootstrap_type }}"
                      value="input-submit .btn.btn-link.btn-{{ bootstrap_type }}"
                    >
                  </li>
                  <li><input type="submit" class="btn" value="input-submit .btn"></li>
                  <li><input type="submit" class="" value="input-submit"></li>
                  <li>
                    <button class="btn btn-{{ bootstrap_type }}">button .btn.btn-{{ bootstrap_type }}</button>
                  </li>
                  <li><button class="btn">button .btn</button></li>
                  <li><button class="">button</button></li>
                </ul>
              </div>
            </div>
          {% endfor %}
      </div>
    
    </div>
  </div>

  {# Anchor Buttons #}
  <div class="box box-solid box-default">
    <div class="box-header with-border">
      <h3 class="box-title">Anchor Buttons</h3>
    </div>
  
    <div class="box-body">
      <div class="row">
        <div class="col-sm-12">
          <h4><i class="fa fa-hand-o-up"></i> Buttons</h4>
        </div>
      </div>
    
      <div class="row">
        {% for bootstrap_type in bootstrap_types %}
          <div class="col-sm-2" style="margin-bottom:10px;">
            <a href="#" class="btn btn-{{ bootstrap_type }}">
              {{ bootstrap_type }}
            </a>
          </div>
        {% endfor %}
      </div>
    
    </div>
  
  </div>

  {# Buttons #}
  <div class="box box-solid box-default">
    <div class="box-header with-border">
      <h3 class="box-title">Buttons</h3>
    </div>
    <div class="box-body">
      <div class="row">
        <div class="col-sm-12">
          <h4><i class="fa fa-hand-o-up"></i> Buttons</h4>
        </div>
      </div>
      <div class="row">
        {% for bootstrap_type in bootstrap_types %}
          <div class="col-sm-2" style="margin-bottom:10px;">
            <button class="btn btn-{{ bootstrap_type }}">
              {{ bootstrap_type }}
            </button>
          </div>
        {% endfor %}
      </div>
    </div>
  </div>

  {# Labels #}
  <div class="box box-solid box-default">
    <div class="box-header with-border">
      <h3 class="box-title">Labels</h3>
    </div>
  
    <div class="box-body">
      <div class="row">
        <div class="col-sm-12">
          <h4><i class="fa fa-tag"></i> Labels</h4>
        </div>
      </div>
    
      <div class="row">
        {% for bootstrap_type in bootstrap_types %}
          <div class="col-sm-2" style="margin-bottom:10px;">
            <label
              data-toggle="tooltip"
              data-placement="top"
              data-html="true"
              class="label label-{{ bootstrap_type }} tooltip-{{ bootstrap_type }}"
              title="<p>Sample test message for the tool tip</p>"
            >
              {{ bootstrap_type }}
            </label>
          </div>
        {% endfor %}
      </div>
    
      <hr>
    
      <div class="row">
        <div class="col-sm-12">
          <h4><i class="fa fa-lg fa-tag"></i> Large Labels</h4>
        </div>
      </div>
    
      <div class="row">
        {% for bootstrap_type in bootstrap_types %}
          <div class="col-sm-2" style="margin-bottom:10px;">
            <label
              data-toggle="tooltip"
              data-placement="top"
              data-html="true"
              class="label label-large label-{{ bootstrap_type }} tooltip-{{ bootstrap_type }}"
              title="<p>Sample test message for the tool tip</p>"
            >
              {{ bootstrap_type }}
            </label>
          </div>
        {% endfor %}
      </div>
    
    </div>
  
  </div>

  <div class="box box-solid box-default">
    <div class="box-header with-border">
      <h3 class="box-title">Boxes</h3>
    </div>
    <div class="box-body">
      <div class="row">
        <div class="col-sm-12">
          <h4><i class="fa fa-cube"></i> Box</h4>
        </div>
      </div>
    
      {% for bootstrap_type in bootstrap_types %}
        <div class="row">
          <div class="col-sm-12">
            <div class="box box-{{ bootstrap_type }}">
              <div class="box-header">
                <h3 class="box-title">{{ bootstrap_type }}</h3>
              
                <div class="box-tools">
                  {% comment %}
                    Doing of of each type of button vs all of them.
                    This has one AdminLTE black text and one white text.
                    This also has one Extra black text and one white text.
                    These are repeated for both buttons and a tags.
                  {% endcomment %}
                
                  <button class="btn btn-default">Default</button>
                  <button class="btn btn-primary">Primary</button>
                  <button class="btn btn-orange">Orange</button>
                  <button class="btn btn-lime">Lime</button>
                  <a class="btn btn-default">Default</a>
                  <a class="btn btn-primary">Primary</a>
                  <a class="btn btn-orange">Orange</a>
                  <a class="btn btn-lime">Lime</a>
                  <button type="button" class="btn btn-box-tool" data-widget="collapse" title="Toggle visibility">
                    <i class="fa fa-minus"></i>
                  </button>
                </div>
              
              </div>
              <div class="box-body">
                <p>This is some filler text for the body of the box</p>
              </div>
            </div>
          </div>
        </div>
      {% endfor %}
    
      <div class="row">
        <div class="col-sm-12">
          <h4><i class="fa fa-cube"></i> Box Solid</h4>
        </div>
      </div>
    
      {% for bootstrap_type in bootstrap_types %}
        <div class="row">
          <div class="col-sm-12">
            <div class="box box-{{ bootstrap_type }} box-solid">
              <div class="box-header">
                <h3 class="box-title">{{ bootstrap_type }}</h3>
              
                <div class="box-tools">
                  {% comment %}
                    Doing of of each type of button vs all of them.
                    This has one AdminLTE black text and one white text.
                    This also has one Extra black text and one white text.
                    These are repeated for both buttons and a tags.
                  {% endcomment %}
                
                  <button class="btn btn-default">Default</button>
                  <button class="btn btn-primary">Primary</button>
                  <button class="btn btn-orange">Orange</button>
                  <button class="btn btn-lime">Lime</button>
                  <a class="btn btn-default">Default</a>
                  <a class="btn btn-primary">Primary</a>
                  <a class="btn btn-orange">Orange</a>
                  <a class="btn btn-lime">Lime</a>
                
                  <button type="button" class="btn btn-box-tool" data-widget="collapse" title="Toggle visibility">
                    <i class="fa fa-minus"></i>
                  </button>
                </div>
              
              </div>
              <div class="box-body">
                <p>This is some filler text for the body of the box</p>
              </div>
            </div>
          </div>
        </div>
      {% endfor %}
    </div>
  </div>

  {# Alerts and Callouts #}
  <div class="box box-solid box-default">
    <div class="box-header with-border">
      <h3 class="box-title">Alerts and Callouts</h3>
    </div>
  
    <div class="box-body">
      <div class="row">
        <div class="col-sm-6">
          <h4><i class="fa fa-warning"></i> Alerts</h4>
        </div>
        <div class="col-sm-6">
          <h4><i class="fa fa-bullhorn"></i> Callouts</h4>
        </div>
      </div>
    
      {% for bootstrap_type in bootstrap_types %}
        <div class="row">
          <div class="col-sm-6">
            <div class="alert alert-{{ bootstrap_type }} alert-dismissible">
              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">x</button>
              <h4><i class="icon fa fa-info"></i> {{ bootstrap_type }}</h4>
              Info alert preview. This alert is dismissible.
            </div>
          </div>
          
          <div class="col-sm-6">
            <div class="callout callout-{{ bootstrap_type }}">
              <h4>I am a {{ bootstrap_type }} callout</h4>
              <p>Follow the steps to continue to payment</p>
            </div>
          </div>
        </div>
      {% endfor %}
    
    </div>
  </div>

  {# Modals #}
  <div class="box box-solid box-default">
    <div class="box-header with-border">
      <h3 class="box-title">Modals</h3>
    </div>
  
    <div class="box-body">
      <div class="row">
        <div class="col-sm-12">
          <h4><i class="fa fa-question-circle"></i> AdminLTE Modals</h4>
        </div>
      </div>
    
      <div class="row">
        {% for bootstrap_type in bootstrap_types %}
          <div class="col-sm-2" style="margin-bottom:10px;">
            <button class="btn btn-{{ bootstrap_type }}" data-toggle="modal" data-target="#modal-{{ bootstrap_type }}">
              {{ bootstrap_type }} Modal
            </button>
          </div>
        {% endfor %}
      </div>
    
      <div class="row">
        <div class="col-sm-12">
          <h4><i class="fa fa-question"></i> Solid Header Only Modals</h4>
        </div>
      </div>
    
      <div class="row">
        {% for bootstrap_type in bootstrap_types %}
          <div class="col-sm-2" style="margin-bottom:10px;">
            <button
              class="btn btn-{{ bootstrap_type }}"
              data-toggle="modal"
              data-target="#modal-solid-{{ bootstrap_type }}"
            >
              {{ bootstrap_type }} Modal
            </button>
          </div>
        {% endfor %}
      </div>
    </div>
  </div>

  {# Tables #}
  <div class="box box-solid box-default">
    <div class="box-header with-border">
      <h3 class="box-title">Tables</h3>
    </div>
    
    <div class="box-body">
      <div class="row">
        <div class="col-sm-12">
          <h4><i class="fa fa-table"></i> AdminLTE Tables</h4>
        </div>
      </div>
      
      <div class="row">
        <div class="col-md-12">
          <table class="table table-hover">
            <tr class="purple">
              <td>Entire</td>
              <td>Row</td>
              <td>Is</td>
              <td>Colored</td>
            </tr>
              <td>Single</td>
              <td class="purple">TD</td>
              <td>Is</td>
              <td>Colored</td>
            <tr>
            </tr>
          </table>
        </div>
        
        <div class="col-md-12">
          <table class="table table-hover">
            <tr class="orange">
              <td>Entire</td>
              <td>Row</td>
              <td>Is</td>
              <td>Colored</td>
            </tr>
              <td>Single</td>
              <td class="orange">TD</td>
              <td>Is</td>
              <td>Colored</td>
            <tr>
            </tr>
          </table>
        </div>
        
      </div>
    </div>
  </div>
{% endblock content %}


{% block modals %}
  {% for bootstrap_type in bootstrap_types %}
    <div class="modal modal-{{ bootstrap_type }} fade" id="modal-{{ bootstrap_type }}" style="display: none;">
      <div class="modal-dialog">
        <div class="modal-content">
          
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span></button>
            <h4 class="modal-title">{{ bootstrap_type }} Modal</h4>
          </div>
          
          <div class="modal-body">
            <p>One fine body…</p>
          </div>
          
          <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-{{ bootstrap_type }}">Save changes</button>
          </div>
          
        </div><!-- /.modal-content -->
        
      </div><!-- /.modal-dialog -->
    </div>
  {% endfor %}
  
  {% for bootstrap_type in bootstrap_types %}
    <div class="modal fade" id="modal-solid-{{ bootstrap_type }}" style="display: none;">
      <div class="modal-dialog">
        <div class="modal-content">
          
          <div class="modal-header alert-{{ bootstrap_type }}">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span></button>
            <h4 class="modal-title">{{ bootstrap_type }} Modal</h4>
          </div>
          
          <div class="modal-body">
            <p>One fine body…</p>
          </div>
          
          <div class="modal-footer">
            <button type="button" class="btn btn-default pull-left" data-dismiss="modal">
              Close
            </button>
            <button type="button" class="btn btn-{{ bootstrap_type }}">
              Save changes
            </button>
          </div>
          
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div>
  {% endfor %}
  
{% endblock modals %}
