<template>
<div id="weather">
    <div class="weather-unit">Temperature: {{ tempc }}</div>
    <div class="weather-unit">Windspeed: {{ windkmh }}</div>
    <div class="weather-unit">
    <input type="checkbox" v-model="verified" v-on:change="update">Verified</input>
    </div>
    </div>
</template>

<script>
export default {
  name: 'weather',
    props: ['tempc', 'windkmh', 'verified'],
    methods: {
        update: function(event) {
            this.$emit('update:verified', event.target.checked);
        }
    }
}
</script>

<style>
   .weather-panel {
                display: inline-block;
                border: 2px solid black;
                margin: 10px;
                padding: 5px;
            }
    .weather-unit {
                display: inline;
                padding: 5px;
                
            }
</style>
