<template>
    <div  class="col-one-layout" >
         <b-card-group  deck class="contact-card" > 
			<b-card   class="mb-3"
                      v-for="contact in contacts" v-bind:key="contact.id"
                   >
					<div slot="header">
					<a v-bind:href="'#/profile/'+contact.id">
               <b-card-img  class="mb-3" 
                      v-bind:title="contact.prefix +' '+contact.name + ' '+ contact.surname"
                      v-bind:src="'/static/'+contact.imagesrc" 
                      img-alt="Img"
                      fluid
                      top></b-card-img></a>
            </div>
				<p class="card-text">{{contact.prefix}} {{contact.name}} {{contact.surname}}</p>
                <p class="card-text" v-html="contact.description"> 
                </p>
                <div slot="footer">
                    <small class="text-muted"> <a v-bind:href="'tel:'+contact.phonenumber"> {{contact.phonenumber}}</a> / <a v-bind:href="'mailto:'+contact.email">{{contact.email}}</a> </small>
                </div>
            </b-card>

        </b-card-group>

		<div style="display:flex;width:100%">
		<article style="width:80vw;margin: auto;text-align:left;font-size:1.3rem">
		 <h2>O nas</h2>
		 <div style="background-image: url('/static/about.png');height: 250px;width: 250px;float: right;display: block;  background-size: cover; position: relative;margin:1rem"> </div>
		<p>
	Jesteśmy 	<strong>wykładowcami, terapeutami, naukowcami i praktykami </strong>zatrudnionymi na Uniwersytecie Medycznym w Poznaniu.
		</p> 
		<p>
		<strong>Od lat działamy bardzo szeroko na rzecz rodziców dzieci z ASD, nauczycieli pracujących z dziećmi z ASD, jak również na rzecz samych dzieci.</strong>
Posiadamy szerokie kierunkowe wykształcenie, wieloletnie doświadczenia w pracy z dzieckiem, oraz jego otoczeniem.
Prowadzimy kursy, szkolenia, konsultacje, edukujemy nauczucieli/terapeutów.
Kierujemy grupami wsparcia dla rodzin dzieci ze spektrum autyzmu.
Wspieramy instytucje kształcące osoby z autyzmem.
Prowadzimy badania naukowe w zakresie zaburzeń rozwojowych ze spektrum autyzmu.
		</p>
		</article>
		</div>
      
    </div>
</template>

<script>
    import ContactService from '../dao/ContactService.js'
        import Localization from '../dao/Localization.js'
        import R from '../static/R.js'

        export default {
            name: 'Contact',
            data() {
                return {
                    contacts: ContactService.list()
                }
            }


        }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.contact-card{margin-top:5rem}
</style>
