<template>
  <div>

    <div style="margin: 100px 0">
      <z-contact />
      <codeblock class="col-12 row">
        &lt;z-contact />
      </codeblock>
      <h3 class="text-medium text-heading">Properties:</h3>
      <codeblock code>
        bgColor: {
          type: String,
          default: 'zhblue'
        },
        columns: {
          type: Array,
          default: () => [12, 12, 12]
        },
        columnsSmall: {
          type: Array,
          default: () => [6, 6]
        },
        abteilung: {
          type: String,
          default: 'Wahlen & Abstimmungen'
        },
        mehrErfahrenUrl: {
          type: String,
          default: 'https://www.zh.ch/de/direktion-der-justiz-und-des-innern/statistisches-amt/wahlen-und-abstimmungen.html'
        },
        strasseUndNr: {
          type: String,
          default: 'Schöntalstrasse 5'
        },
        postleitzahlUndOrt: {
          type: String,
          default: '8090 Zürich'
        },
        googleMapUrl: {
          type: String,
          default: 'https://www.google.com/maps/dir/?api=1&destination=47.3697559,8.5280481'
        },
        tel: {
          type: String,
          default: '+41432597575'
        },
        email: {
          type: String,
          default: 'wahlen@statistik.ji.zh.ch'
        }
      </codeblock>
    </div>

  </div>
</template>

<script>
export default {
  name: 'dev-PageContact',
  components: {
    'codeblock': () => import('../Codeblock.vue'),
    'z-contact': () => import('../../atom/ZContact.vue')
  }
}
</script>
