<div class="ancAdresse">
  <div ng-if="showAdresse" class="hideAddress">
    <div class="row spbrow">
      <div class="form-intermediate-title" ng-if="showTitle">
        {{'address.title' | translate}}
        <div ng-if="toggleAdresse" class="btn btn-xs text-right" ng-click="toggle()"
          title="Afficher l'adresse de l'occupant">
          <i class="fa fa-expand"
            ng-class="{'fa-expand':adresseContracted==false,'fa-compress':adresseContracted==true}"></i>
        </div>

        <div ng-if="adresseHab" class="btn btn-xs text-right" ng-click="getHabAdr()"
          title="Récupérer les informations de l'habitation">
          <i class="fa fa-search"></i>
        </div>

        <div class="btn btn-xs text-right" ng-click="resetAdr()" title="Réinitialiser l'adresse">
          <i class="fa fa-times"></i>
        </div>
      </div>

      <div class="col-xs-2" ng-class="{'setNone' : adresseContracted}">
        <label data-for="{{labelKey}}.adresse_num_rue">{{'address.number' | translate}}</label>
        <input type="number" min="0" class="form-control" ng-model="res.adresse_num_rue" ng-disabled="!editable" />
      </div>
      <div class="col-xs-2" ng-class="{'setNone' : adresseContracted}">
        <label data-for="{{labelKey}}.adresse_num_rue_extra">{{'address.nr_extra' | translate}}</label>
        <input type="text" class="form-control" ng-model="res.adresse_num_rue_extra" data-min-length="0"
        data-html="1" data-auto-select="true" data-animation="am-flip-x" bs-options="btq as btq for btq in ['bis','ter','quater']"
        ng-disabled="!editable" bs-typeahead />
      </div>
      <div class="col-xs-8" ng-class="{'setNone' : adresseContracted}">
        <i class="fa fa-info-circle pull-right nbCharMax" title="38 caractères maximum"></i>
        <label class="required" data-for="{{labelKey}}.adresse_rue" translate>
          address.street
        </label>
        <input type="text" class="form-control" ng-model="res.adresse_rue" ng-disabled="!editable" maxlength="38" />
      </div>
    </div>
    <div class="row" ng-class="{'setNone' : adresseContracted}">
      <div class="col-xs-6">
        <div class="row">
          <div class="col-xs-6">
            <label data-for="{{labelKey}}.adresse_batiment">
              {{'address.building' | translate}}
            </label>
            <input type="text" class="form-control" ng-model="res.adresse_batiment" ng-disabled="!editable" />
          </div>

          <div class="col-xs-6">
            <label data-for="{{labelKey}}.adresse_appt">
              {{'address.apartment' | translate}}
            </label>
            <input type="text" class="form-control" ng-model="res.adresse_appt" ng-disabled="!editable" />
          </div>
        </div>
        <div class="row">
          <div class="col-xs-6">
            <label data-for="{{labelKey}}.adresse_etage">
              {{'address.floor' | translate}}
            </label>
            <input type="text" class="form-control" ng-model="res.adresse_etage" ng-disabled="!editable" />
          </div>

          <div class="col-xs-6">
            <label data-for="{{labelKey}}.adresse_escalier">
              {{'address.staircase' | translate}}
            </label>
            <input type="text" class="form-control" ng-model="res.adresse_escalier" ng-disabled="!editable" />
          </div>
        </div>
      </div>

      <div class="col-xs-6">
        <i class="fa fa-info-circle pull-right nbCharMax" title="38 caractères maximum"></i>
        <label data-for="{{labelKey}}.adresse_complement">{{'address.addr_supplement' | translate}}
        </label>
        <textarea class="form-control" rows="4" ng-model="res.adresse_complement" ng-disabled="!editable"
          maxlength="38"></textarea>
      </div>
    </div>

    <div class="row spbrow" ng-class="{'setNone' : adresseContracted}">
      <div class="col-xs-6">
        <label data-for="{{labelKey}}.adresse_ville" ng-class="required === true ? 'required':''">
          {{'address.town' | translate}}
        </label>
        <select ng-if="forceVille" class="form-control magnifyTypeahead" 
                ng-model="$parent.res.adresse_ville"
                ng-disabled="!editable"
                ng-options="x.value as x.value for x in listeDesVillesStatique|orderBy:'value'" 
                ng_change="villeHasBeenSelected($parent.res.adresse_ville)"
        />
        <input ng-if="!forceVille" type="text" class="form-control magnifyTypeahead" 
               ng-model="$parent.res.adresse_ville"
               data-min-length="2" data-html="1" data-animation="am-flip-x" 
               ng-disabled="!editable"
               html="true" bs-options="x as (x.style) for x in listeDesVilles" 
               ng-keyup="getAutocomplete(res.adresse_ville)"
               watchOptions="true" limit="50" 
               typeahead-no-results="emptyCommunesList" bs-typeahead
        />
      </div>
      <div class="col-xs-4">
        <label data-for="{{labelKey}}.adresse_cp" ng-class="$parent.res.adresse_pays === 'France' ? 'required':''">
          
        {{'address.postal_code' | translate}} </label>
        <input type="text" class="form-control magnifyTypeahead" ng-model="$parent.res.adresse_cp"
        data-html="1" data-animation="am-flip-x" data-auto-select="true" html="true"
        ng-disabled="!editable" bs-options="x as (x.style) for x in getCP($viewValue)"
        allow-only-one-value="true" limit="50" watchOptions="true" bs-typeahead maxlength="5" />
      </div>
      <div class="col-xs-1">
        <button class="btn btn-default pull-right" ng-if="emptyCommunesList" style="margin-top: 28px" type="button"
          ng-click="openNouvelleVilleDialog()">
          +
        </button>
      </div>

      <div class="col-xs-6">
        <label data-for="{{labelKey}}.adresse_bp">
          {{'address.bp' | translate}}
        </label>
        <input type="text" class="form-control" ng-model="res.adresse_bp" ng-disabled="!editable" />
      </div>
      <div class="col-xs-6">
        <label class="required" data-for="{{labelKey}}.adresse_pays">
          {{'address.country' | translate}}
        </label>
        <input type="text" class="form-control magnifyTypeahead" ng-model="$parent.res.adresse_pays" data-min-length="0"
          data-html="1" data-auto-select="true" data-animation="am-flip-x" ng-disabled="!editable" ng-if="listePays"
          bs-options="v.name as v.name for v in listePays" bs-typeahead />
      </div>


      <div class="col-xs-12" ng-if="showCoordonnes">
        <label> {{'address.coordonnees' | translate}}
        </label>
      </div>
      <div class="col-xs-6" ng-if="showCoordonnes">
        <label data-for="{{labelKey}}.coordinates_x">
          {{'address.coordinates_x' | translate}}
        </label>
        <input type="text" class="form-control" ng-model="res.coordinates_x" ng-disabled="!editable" />
      </div>
      <div class="col-xs-6" ng-if="showCoordonnes">
        <label data-for="{{labelKey}}.coordinates_y">
          {{'address.coordinates_y' | translate}}
        </label>
        <input type="text" class="form-control" ng-model="res.coordinates_y" ng-disabled="!editable" />
      </div>
    </div>
  </div>
  <div class="row spbrow" ng-if="showContact">
    <div class="form-intermediate-title" ng-if="showTitle">
      {{'address.contact' | translate}}
    </div>
    <div class="col-xs-6">
      <label data-for="{{labelKey}}.num_tel">{{'address.phone_number' | translate}}</label>
      <input type="text" class="form-control" ng-model="res.num_tel" ng-disabled="!editable" />
    </div>
    <div class="col-xs-6">
      <label data-for="{{labelKey}}.num_port">{{'address.mobile_number' | translate}}</label>
      <input type="text" class="form-control" ng-model="res.num_port" ng-disabled="!editable" />
    </div>
    <div class="col-xs-6">
      <label data-for="{{labelKey}}.fax">{{'address.fax' | translate}}</label>
      <input type="text" class="form-control" ng-model="res.fax" ng-disabled="!editable" />
    </div>
    <div class="col-xs-6">
      <label data-for="{{labelKey}}.email">{{'address.email' | translate}}</label>
      <input type="text" class="form-control" ng-model="res.email" ng-disabled="!editable" />
    </div>
  </div>
</div>