<back-btn></back-btn>
<div class="d-flex justify-content-center mt-5 pt-5" *ngIf="!place_loaded">
  <div class="spinner spinner-border"></div>
</div>
<br>
<div style="height: 300px;" leaflet [leafletOptions]="options" *ngIf="place_loaded && place_info.lat && place_info.lon">
  <div [leafletLayers]="layers"></div>
</div>

<div class="place_info" *ngIf="place_loaded && place_info.lat && place_info.lon">
  <h3>
    <a href="https://www.google.com/maps/@?api=1&map_action=map&center={{ place_info.lat }},{{ place_info.lon }}&zoom=19&basemap=satellite" target="_blank">{{ 'place_details.open_in_google_maps'|translate }}</a>
  </h3>
  <br>
  <h4 *ngIf="place_info.name">
    {{ 'name'|translate|ftitlecase }}: <b>{{ place_info.name }}</b>
  </h4>
  <h4 *ngIf="place_info.country">
    {{ 'place_details.country'|translate|ftitlecase }}: <b>
      {{ place_info.country }} ({{ place_info.country_code }})
      <ng-container *ngIf="place_info.state">- {{ place_info.state }}</ng-container>
    </b>
  </h4>
  <h4 *ngIf="place_info.village">
    {{ 'place_details.village'|translate|ftitlecase }}: <b>
      {{ place_info.village }}
      <ng-container *ngIf="place_info.suburb">- {{ place_info.suburb }}</ng-container>
    </b> ({{ 'place_details.postcode'|translate }} <b>{{ place_info.postcode }}</b>)
  </h4>
  <h4 *ngIf="place_info.road">
    {{ 'place_details.road'|translate|ftitlecase }}: <b>{{ place_info.road }}</b>
  </h4>
  <h4 *ngIf="place_info.house_number">
    {{ 'place_details.house_number'|translate|ftitlecase }}: <b>{{ place_info.house_number }}</b>
  </h4>
</div>

<div class="place_info" *ngIf="place_loaded && place_info.municipality">
  <h3>
    <a href="https://www.google.com/maps/search/?api=1&query={{ place_query }}&zoom=19&basemap=satellite" target="_blank">{{ 'place_details.open_in_google_maps'|translate }}</a>
  </h3>
  <br>
  <h4>
    {{ 'name'|translate|ftitlecase }}: <b>{{ place_info.name }} - {{ place_info.municipality.name }}</b><br>
    {{ 'province'|translate|ftitlecase }}: <b>{{ place_info.municipality.province.name }} {{ place_info.municipality.province.short_name }}</b><br>
    {{ 'region'|translate|ftitlecase }}: <b>{{ place_info.municipality.province.region }}</b>
  </h4>
  <br>
  <h4>
    {{ 'cadastral_code'|translate|ftitlecase }}: <b>{{ place_info.municipality.cadastral_code }}</b><br>
    {{ 'zip_code'|translate|ftitlecase }}: <b>{{ place_info.municipality.postal_code }}</b><br>
    {{ 'prefix'|translate|ftitlecase }}: <b>{{ place_info.municipality.prefix }}</b>
  </h4>
  <br>
  <h4>
    {{ 'email'|translate|ftitlecase }}: <a href="mailto:{{ place_info.municipality.email }}">
      {{ place_info.municipality.email }}
    </a><br>
    {{ 'pec'|translate|ftitlecase }}: <a href="mailto:{{ place_info.municipality.pec }}">
      {{ place_info.municipality.pec }}
    </a><br>
    {{ 'phone_number'|translate|ftitlecase }}: <a href="tel:{{ place_info.municipality.phone }}">
      {{ place_info.municipality.phone }}
    </a><br>
    {{ 'fax'|translate|ftitlecase }}: <a href="tel:{{ place_info.municipality.fax }}">
      {{ place_info.municipality.fax }}
    </a>
  </h4>
</div>
