<div class="container-fluid px-0">
  <ul class="row">
    <li
      class="col-12 col-sm-12 col-md-6 col-lg-12 col-xl-12"
      ng-repeat="location in ctrl.locations"
      ng-click="ctrl.toggleItemActive($index)"
      ng-class="{active: location.active}">
      <dealer-card>
        <div class="container-fluid px-0">
          <h4>{{ location.name_1 }}</h4>
          <div class="row">
            <div class="col-5 col-sm-5 col-md-12 col-lg-5 col-xl-5">
              <p class="p5" ng-if="location.Strasse">{{ location.Strasse }}</p>
              <p class="p5" ng-if="location.PLZ">{{ location.PLZ }} {{ location.Ort }}</p>
              <br>
              <p class="p5" ng-if="location.Telefon1">Tel: {{ location.Telefon1 }}</p>
              <p class="p5" ng-if="location.Fax">Fax: {{ location.Fax }}</p>
              <p class="p5" ng-if="location.Homepage">
                <a href="http://{{ location.Homepage }}" target="_blank">{{ location.Homepage }}</a>
              </p>
            </div>
            <div class="col-7 col-sm-7 col-md-12 col-lg-7 col-xl-7">
              <h6>Kompetenzen</h6>
              <p ng-if="location['CRM M1']">{{ location['CRM M1'] }}</p>
              <p ng-if="location['CRM M2']">{{ location['CRM M2'] }}</p>
              <p ng-if="location['CRM M3']">{{ location['CRM M3'] }}</p>
              <div
                class="authorized-dealer bg-champagne-25 my-3"
                layout="row"
                layout-align="start center"
                ng-if="location['Autorisierter Händler-ID']">
                <beyer-icon
                  name="star-outline"
                  medium
                  iconset="material">
                </beyer-icon>
                <div>
                  <p>Autorisierter Händler</p>
                  <p>{{ location['Autorisierter Händler-ID'] }}</p>
                </div>
              </div>
              <p>
                <beyer-icon
                  name="Map-Pin 4"
                  medium>
                </beyer-icon>
                Entfernung: {{ location.distance|number:2 }} km
              </p>
            </div>
          </div>
        </div>
      </dealer-card>
    </li>
  </ul>
</div>