<template>

<div>
    <v-layout row>
        <v-flex pl-2 pr-2 pt-2 pb-3 md12>
            <v-card class="persyaratan">
                <v-layout pl-2 pr-2 row>
                    <v-flex md12>
                    <v-list
                    subheader
                    three-line
                    
                    >
                    <v-subheader red--text text--lighten-1> PERSYARATAN</v-subheader>
                    <v-divider></v-divider>
                        

                        <v-list-tile @click="">
                            <v-list-tile-action>
                            <v-checkbox
                                v-model="notifications"
                            ></v-checkbox>
                            </v-list-tile-action>

                            <v-list-tile-content @click.prevent="notifications = !notifications">
                            <v-list-tile-sub-title class="pt-3">
                                <v-flex justify-center  md12 style="width:100%">
                                    <v-text-field 
                                        label="Tidak bab satu minggu"
                                        placeholder = "ketikkan alasan di sini ..."
                                        outline
                                        class="text-list-fhm"
                                    ></v-text-field>
                                </v-flex>
                            </v-list-tile-sub-title>
                            </v-list-tile-content>
                        </v-list-tile>

                        <v-list-tile @click="">
                            <v-list-tile-action>
                            <v-checkbox
                                v-model="notifications"
                            ></v-checkbox>
                            </v-list-tile-action>

                            <v-list-tile-content @click.prevent="notifications = !notifications">
                            <v-list-tile-sub-title class="pt-3">
                                <v-flex justify-center  md12 style="width:100%">
                                    <v-text-field 
                                        label="Puasa 2 jam sebelum pemeriksaaan"
                                        placeholder = "ketikkan alasan di sini ..."
                                        outline
                                        class="text-list-fhm"
                                    ></v-text-field>
                                </v-flex>
                            </v-list-tile-sub-title>
                            </v-list-tile-content>
                        </v-list-tile>

                        <v-list-tile @click="">
                            <v-list-tile-action>
                            <v-checkbox
                                v-model="notifications"
                            ></v-checkbox>
                            </v-list-tile-action>

                            <v-list-tile-content @click.prevent="notifications = !notifications">
                            <v-list-tile-sub-title class="pt-3">
                                <v-flex justify-center  md12 style="width:100%">
                                    <v-text-field 
                                        label="Puasa 1 hari sebelum pemeriksaan"
                                        placeholder = "ketikkan alasan di sini ..."
                                        outline
                                        class="text-list-fhm"
                                    ></v-text-field>
                                </v-flex>
                            </v-list-tile-sub-title>
                            </v-list-tile-content>
                        </v-list-tile>
                        
                    
                    </v-list>
                    </v-flex>
                </v-layout>
            </v-card>
        </v-flex>
    </v-layout>
    <v-layout row wrap>
        <v-flex xs12 pt-2>
            <v-card>
                <v-btn class= "button parallelogram"  color="success">Pasien Dokter</v-btn>
                <v-btn class= "button parallelogram"  color="warning">MOU </v-btn>
                    <v-btn class= "button parallelogram"  color="error">Kirim Hasil </v-btn>
                <v-btn class= "button parallelogram"  color="info"> Barcode</v-btn>
            </v-card>
        </v-flex>
    </v-layout>

</div>

</template>

<style scoped>

.v-card{
 text-align: center;
}
.v-btn__content{
margin-top : -10px;
}
.button {

padding: 30px 16px;
 width : 20%;
  text-decoration:none;
}

.parallelogram{
  transform: skew(-20deg);

}

.v-btn {
 word-break: break-all;
}

</style>
<script>
module.exports = {

}
</script>
