{% if mod.subdomain_pack > -1 %}
  {% set domainbar=100/mod.subdomain_pack*mod.subdomain_accounts %}
  {% if domainbar >=26 and domainbar <=50 %}
  {% set classbar = 'progress-bar progress-bar-success' %}
  {% elseif domainbar >=51 and domainbar <=75 %}
  {% set classbar = 'progress-bar progress-bar-warning' %}
  {% elseif domainbar >75 %}
  {% set classbar = 'progress-bar progress-bar-danger' %}
  {% else %}
  {% set classbar = 'progress-bar' %}
  {% endif %}
  {% set classbar = 'progress-bar' %}
  {% set label_sub = mod.subdomain_pack %}
{% else %}
  {% set domainbar=0 %}
  {% set classbar = 'progress-bar' %}
  {% set label_sub = '&infin;' %}
{% endif %}

{% set porcdomain=(mod.pack_bandwidth/100)*totalbanw %}
{% if porcdomain >=26 and porcdomain <=50 %}
{% set classbarbarw = 'progress-bar progress-bar-success' %}
{% elseif porcdomain >=51 and porcdomain <=75 %}
{% set classbarbarw = 'progress-bar progress-bar-warning' %}
{% elseif porcdomain >75 %}
{% set classbarbarw = 'progress-bar progress-bar-danger' %}
{% else %}
{% set classbarbarw = 'progress-bar' %}
{% endif %}

<style media="screen">
  .stats-module{
    position: absolute;
    top: -9rem;
    right: 1.6rem;
    z-index:50;
  }
  .stats-module-items{
    display: flex;
    justify-content: flex-end;
  }
  .stats-module-items-display{
    box-shadow: 2px -9px 6px #00000008;
  }
  .dataTables_wrapper div.row{
    width:auto !important;
  }
  #table_subdomains_filter label{
    margin-right:0px;
  }
  #new_form_wrapper{
    display:none;
  }
  .domain-header-title{
    display: flex;
    padding-right: 15px;
    justify-content: space-between;
  }
  .ibox-footer{
    font-size:100%;
  }
  .new-form-flex{
    display:flex;
    flex-wrap:wrap;
  }
  .new-form-flex-form{
    width:70%;
    padding-right:2rem;
  }
  .new-form-flex-info{
    width:30%;
  }
  .ssl-row-label{
    display: flex;
    align-items: center;
  }
  #dir_explorer_domain .modal-body{
    max-height:70vh;
    min-height:40vh;
    overflow:auto;
  }
  #dir_explorer_domain .dir-item:nth-child(even){
    background-color:#f3f3f3;
  }
  #dir_explorer_domain .dir-item:hover{
    background-color:#cccccc;
    cursor:pointer;
    color: #333;
  }
  #dir_explorer_domain .dir-item{
    padding: 5px;
  }
  .dir-item .fa{
    margin-right:5px;
  }
  .ssl-row-label .fa-stack {
    font-size: 1rem;
    margin-left: 3px;
    color: #156192;
    cursor: pointer;
  }
  .directory-selector-btn{
    display:flex;
  }
  .dir-sel-btn .fa{
    font-size: 2rem;
    margin-right: 5px;
  }
  .dir-sel-btn{
    display: flex;
    align-items: center;
  }
  #dirsel{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 25rem;
    /* border: 1px solid #999; */
    direction: rtl;
    text-align: left;
    line-height: 1.5rem;
    padding: 0px;
    display: inline-block;
    margin-bottom: 0px;
  }
  #dir_list{
    padding-bottom: 10px;
  }
  #new_form_wrapper .form-group {
    display: flex;
    align-items: center;
  }
  #alert_info{
    display:none;
  }
  #alert_info .alert-info{
    display:flex;
  }
  #alert_info .alert-info p{
    margin-left: 5px;
    padding-left: 5px;
    border-left: 1px solid #c2d2da;
  }
  .domain_bw .progress {
    margin-bottom: 5px;
    margin-top: 5px;
  }
  .td-table-domain-icon,
  .td-table-domain{
    padding-top: 1.6rem !important;
  }
  .td-table-domain-icon .fa{
    font-size:2rem;
  }
  .td-table-domain-btn{
    padding-top: 1.3rem !important;
  }
  .error-field{
    color: #ff0000;
    margin-top: 5px;
    font-size: 12px;
    display: block;
    margin-bottom: -10px;
  }
  .deleting_tr{
    background-color: #f5f5f566;
    color: #e7eaec;
  }
  .whole-subdomain-inputs{
    display:flex;
    flex-wrap:wrap;
  }
  .whole-subdomain-inputs input{
    width:30%;
    margin-right:1rem;
  }
  .whole-subdomain-inputs select{
    width:68%;
  }
  #table_subdomains{
    width:100% !important;
  }
  .infinite-bandwidth{
    font-size: 2.5rem;
    line-height: 10px;
    top: 4px;
    position: relative;
  }
</style>
<div class="modal" id="deletemodaldomain" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm" style="width:340px">
    <div class="modal-content animated fadeIn">
      <div class="modal-header" style="padding: 10px;">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">×</span>
          <span class="sr-only">{{langene.MDCLOSE}}</span>
        </button>
        <h4 class="modal-title text-center" style="font-size:2rem">{{langmod.SDOMATTENTION}}</h4>
      </div>
      <div class="modal-body" style="padding: 20px;">
        <!-- <p>You are about to delete the FTP user: <br>
        <strong id="descron">sanitarios@testcecilio.com</strong>
        <br>Are you sure you want to continue?</p> -->
      </div>
      <div class="modal-footer">
        <!-- <button type="button" class="btn btn-white" data-dismiss="modal">NO</button>
        <button type="button" class="btn btn-primary" onclick="ftpdelete(1,'sanitarios','testcecilio.com',0)">YES</button>-->
      </div>
    </div>
  </div>
</div>
<div class="modal" id="dir_explorer_domain" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" style="width:500px;">
    <div class="modal-content animated fadeIn">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
            <span aria-hidden="true">&times;</span><span class="sr-only">{{langene.MDCLOSE}}</span>
        </button>
        <h4>{{langmod.SDOMSELDIR}}</h4>
      </div>
      <div class="modal-body" style="padding:0px">

      </div>
      <div class="modal-footer">
        <button type="button" disabled class="btn btn-success btn-block disabled" id="sel_path_btn" onclick="selCurrentPath()">
          <i class="fa fa-thumb-tack" aria-hidden="true"></i> {{langmod.SDOMCHPATH}}
        </button>
      </div>
    </div>
  </div>
</div>

<div class="modal" id="dir_explorer_domainEdit" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog" style="width:500px;">
    <div class="modal-content animated fadeIn">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span><span class="sr-only">{{langene.MDCLOSE}}</span>
        </button>
        <h4>{{langmod.DOMDIRSEL}}</h4>
      </div>
      <div class="modal-body" style="padding:0px">

      </div>
      <div class="modal-footer">
        <input type="hidden" id="domain" value="">
        <input type="hidden" id="sub" value="">
        <button type="button" disabled class="btn btn-success btn-block disabled" id="sel_path_btnEdit" onclick="selCurrentPathEdit()">
          <i class="fa fa-thumb-tack" aria-hidden="true"></i> {{langmod.SDOMCHPATH}}
        </button>
      </div>
    </div>
  </div>
</div>

<div class="row  border-bottom white-bg dashboard-header">
    {% if mod.fsl == 1 %}
    {% set stflalert ='block' %}
    {% else %}
    {% set stflalert ='none' %}
    {% endif %}
    <div class="row  alert alert-warning col-lg-12" style="margin-left: 5px; padding-right: 5px;display:{{stflalert}}" id="alertfl">
        <strong>{{langene.GALARTFILEBLOCK}}</strong>
    </div>
    <div class="col-lg-10">
        <h2>{{langmod.SDTITLE}} ({{users}})</h2>
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="?">Home</a></li>
            <li class="breadcrumb-item active"><strong>{{langmod.SDTITLE}}</strong></li>
        </ol>
    </div>
</div>
<div class="row" style="margin-top:2rem">
  <div class="col-lg-12">
    <div class="row">
      <div class="col-lg-12">
        <div class="stats-module">
          <div class="stats-module-items">
            <div class="stats-module-items-display" style="margin-right:1rem;">
              <div class="ibox-content">
                <ul class="stat-list">
                  <li id="inddom">
                    <h2 class="no-margins" id="tldomind">{{langene.SUBDOMAIN}} <span id="subdomains_used">{{mod.subdomain_accounts}}</span> / {{label_sub|raw}}</h2>
                    <small>{{langmod.SUBDOMLABEL4}} / {{langmod.SUBDOMLABEL5}}</small>
                    <div class="stat-percent" id="stat_percent_domain">{{domainbar|round}}%</div>
                    <div id="bardomind" class="progress progress-mini">
                    <div style="width: {{domainbar}}%;" class="{{classbar}}" id="bardomindpor"></div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
            <div class="stats-module-items-display">
              <div class="ibox-content">
                <ul class="stat-list">
                  <li id="inddom2">
                    <h2 class="no-margins" id="tldomind2">{{langmod.SUBDOMLABEL11}}</h2>
                    <small>{{langmod.SUBDOMLABEL12}}&nbsp;</small>
                    <div class="stat-percent">{{porcdomain|round}}%</div>
                    <div id="bardomind2" class="progress progress-mini">
                    <div style="width: {{porcdomain}}%;" class="{{classbarbarw}}" id="bardomindpor2"></div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="ibox" id="subdomains_list_wrapper">
          <div class="ibox-title">
            <h4>
              {{langmod.SUBDOMLABEL1}}
              {% if (mod.subdomain_accounts < mod.subdomain_pack) or(mod.subdomain_pack=='-1') %}
              <button type="button" id="btn_add_subdomain" onclick="showNewForm()" class="btn btn-success btn-xs mr5 mb10 pull-right"><i class="fa fa-plus"></i> {{langmod.SDBNTADD}}</button>
              {% endif %}
            </h4>
          </div>
          <div class="col-md-12 ibox-content" id="table_subdomains_wrapper">
            <div class="table_cron_loader"><span><i class="fa fa-circle-o-notch fa-spin"></i></span></div>
          
          </div>
        </div>
        <div class="ibox" id="new_form_wrapper">
          <div class="ibox-title domain-header-title">
            <h4>
              {{langmod.SDOMTITLE}}
            </h4>
            <div class="actions-btn text-right">
              <button onclick="sendNewSub()" class="btn btn-w-m btn-sm btn-success btn-save-domain {{swver}}" {{swver}}>
                <i class="fa fa-floppy-o" aria-hidden="true"></i> {{langmod.SDOMSVBTN}}
              </button>
              <button onclick="cancelNewForm()" class="btn btn-w-m btn-sm btn-warning btn-cancel-domain {{swver}}" {{swver}}>
                <i class="fa fa-ban" aria-hidden="true"></i> {{langmod.SDOMCANCELBTN}}
              </button>
            </div>
          </div>
          <div class="ibox-content new-form-flex">
            <div class="new-form-flex-form">
              <div class="form-group row">
                <div class="col-sm-3"><b>{{langmod.SSUBDOMAIN}}:</b></div>
                <div class="col-sm-9 whole-subdomain-inputs">
                  <input type="text" class="form-control" id="subdomprefix">
                  <select id="domain_toadd" class="form-control" >
                    {% for dsel in mod.seldomain %}
                      <option value="{{ dsel.domain }}">{{ dsel.domain }}</option>
                    {% endfor %}
                  </select>
                </div>
              </div>
              <div class="form-group row" style="margin-bottom:5px">
                <div class="col-sm-3"><b>{{langmod.SDPATH}}:</b></div>
                <div class="col-sm-9 directory-selector-btn">
                  <span class="btn btn-white dir-sel-btn" data-toggle="tooltip" data-placement="bottom" title="{{langmod.SDOMCHOOBPAT}}" onclick="showExplorer()">
                    <i class="fa fa-home" aria-hidden="true"></i>
                    <div id="dirsel">/</div>
                  </span>
                  <input type="text" id="pathdomain" class="form-control">
                </div>
              </div>
              <div class="form-group row">
                <div class="col-sm-3 ssl-row-label">
                  <b>{{langmod.SUBDOMLABEL8}}</b>
                  <span class="fa-stack fa-lg" data-toggle="tooltip" data-placement="bottom" title="{{langmod.SDOMSSLTOOLTIP}}">
                    <i class="fa fa-circle-thin fa-stack-2x"></i>
                    <i class="fa fa-info fa-stack-1x"></i>
                  </span>
                </div>
                <div class="col-sm-9">
                  <div class="checkbox">
                    <input type="checkbox" id="ssl_checkbox" value="option1">
                    <label for="ssl_checkbox">&nbsp;</label>
                  </div>
                </div>
              </div>
            </div>
            <div class="new-form-flex-info">
              <div class="row">
                <div class="col-md-12" id="alert_info">
                  <div class="alert alert-info" style="margin-bottom: 0px;">
                    <div class="">
                      <span class="fa-stack">
                        <i class="fa fa-circle fa-stack-2x"></i>
                        <i class="fa fa fa-info fa-stack-1x fa-inverse"></i>
                      </span>
                    </div>
                    <p><b>IMPORTANT</b> {{langmod.SUBDOMLABEL7}}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="ibox-footer">
            <div class="text-right">
              <button onclick="sendNewSub()" class="btn btn-w-m btn-sm btn-success btn-save-domain {{swver}}" {{swver}}>
                <i class="fa fa-floppy-o" aria-hidden="true"></i> {{langmod.SDOMSVBTN}}
              </button>
              <button onclick="cancelNewForm()" class="btn btn-w-m btn-sm btn-warning btn-cancel-domain {{swver}}" {{swver}}>
                <i class="fa fa-ban" aria-hidden="true"></i> {{langmod.SDOMCANCELBTN}}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="wrapper wrapper-content" style="margin-top: 35px">
      {% include 'footer.html' %}
  </div>
</div>
<style>
    .dataTables_wrapper div.row{
        width: 100%;
    }
</style>