<div class="modal fade" id="password_generator_modal" role="dialog" aria-hidden="true" tabindex="-1">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        
        <div class="row" style="margin-bottom:10px;">
          <div class="col-12">
            <label class="form-check-label">
              <input id="pass_lower" type="checkbox" class="form-check-input" checked>
              Include lowercase letters <small><pre style="display:inline;">( a-z )</pre></small>
            </label>
          </div>

          <div class="col-12">
            <label class="form-check-label">
              <input id="pass_upper" type="checkbox" class="form-check-input" checked>
              Include uppercase letters <small><pre style="display:inline;">( A-Z )</pre></small>
            </label>
          </div>

          <div class="col-12">
            <label class="form-check-label">
              <input id="pass_digits" type="checkbox" class="form-check-input" checked>
              Include numbers <small><pre style="display:inline;">( 0-9 )</pre></small>
            </label>
          </div>

          <div class="col-12">
            <label class="form-check-label">
              <input id="pass_symbols" type="checkbox" class="form-check-input" checked>
              Include symbols <small><pre style="display:inline;">( !\&#x22;#$%&#x26;&#x27;()*+,-./ )</pre></small>
            </label>
          </div>
        </div>

        <div class="row">
          <div class="col">
            <small>
              <span id="pass_n">32</span> characters.
            </small>
            <input 
              id="pass_length" 
              type="text" 
              data-slider-id='pass_length' 
              data-slider-min="5" 
              data-slider-max="128" 
              data-slider-step="1" 
              data-slider-value="32"/>
          </div>
        </div>

        <div class="row">
          <div class="col">
            <input type="text" value="" id="generated_password"/>
          </div>
        </div>

      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-default action-button" ng-click="onGeneratePassword()">
          <span class="fa fa-refresh"></span>
        </button>
        <button type="button" class="btn btn-default action-button" ng-click="onUsePassword()">
          <i class="fa fa-check" aria-hidden="true"></i> 
        </button>
        <button type="button" class="btn btn-default action-button" data-dismiss="modal">
          <i class="fa fa-times" aria-hidden="true"></i> 
        </button>
      </div>
    </div>
  </div>
</div>
