<template>
  <app-container>
    <v-row>
      <v-col cols="12" class="text-center">
        <h1 class="display-2">Our Portfolio</h1>
      </v-col>
    </v-row>

    <v-row>
      <v-col cols="12" class="text-center">
				<hr>
      </v-col>
    </v-row>

    <v-row class="justify-center justify-md-start">
      <v-col
				v-for="(p, i) in projects"
				:key="i"
				cols="12"
				sm="10"
				md="6"
			>
				<v-card>
					<v-card-title class="grey" :class="$vuetify.theme.dark ? 'darken-2' : 'lighten-5'">
						<img :src="p.logo" class="mr-3" width="48" height="48">
						{{ p.title }}

						<div class="flex-grow-1"/>

						<v-btn text color="blue" class="px-0" :href="p.href" target="_blank">
							Visit Site
							<v-icon class="ml-1" small>launch</v-icon>
						</v-btn>
					</v-card-title>

					<v-divider />

					<v-card-text>
						{{ p.desc }}

						<!--
						<div class="text-right">
							<v-btn small class="primary" :href="p.href" target="_blank">Visit Site</v-btn>
						</div>
						-->
					</v-card-text>
				</v-card>
      </v-col>
    </v-row>
  </app-container>
</template>

<script>
export default {
	data() {
		return {
			projects: [
				{
					title: 'SBA Ponderay',
					logo: 'https://sbaponderay.com/img/sba-ponderay.png',
					desc: 'SBA Ponderay is a Jiu Jitsu gym in Ponderay, ID. It specializes in the Progressive System of Brazilian Jiu Jitsu. Simple Systems\' owner trains there several times a week.',
					href: 'https://sbaponderay.com/',
				},
			],
		}
	},
}
</script>
