<template>
  <div class="q-ma-sm">
    <div>
      <q-card>
        <q-bar class="bg-primary text-white">
          <span> Social Share </span>
          <q-space />
          <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
        </q-bar>
        <q-card-section class="inset-shadow">
            <h2>Condividi su</h2><br>
          <q-card class="dialog_card row q-pa-sm q-ma-sm">

            <ShareNetwork
              style="padding: 10px; margin: 10px"
              v-for="network in networks"
              :key="network.network"
              :url="url"
              :style="{ backgroundColor: network.color }"
              :title="title"
              :description="description"
              :quote="quote"
            >
              <i :class="network.icon" class="q-mr-sm"></i>
              <span>{{ network.name }}</span>
            </ShareNetwork>
          </q-card>
        </q-card-section>
      </q-card>
      <br />
    </div>
  </div>
</template>

<script lang="ts" src="./CShareSocial.ts">
</script>

<style lang="scss" scoped>
@import './CShareSocial.scss';
</style>
