<template>
  <div class="device-alerts flex-container">
    <div :class="['alert', { 'important' : alert.state }]" v-for="(alert, index) in deviceAlerts" :key="index">
      <h2>{{alert.mount}} <span>{{alert.unit}}</span></h2>
      <p>{{alert.description}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'device-alerts',
  data() {
    return {
      deviceAlerts: [
        {
          id: 0,
          mount: '100',
          unit: '%',
          description: '> 80 km/h',
          state: true,
        },
        {
          id: 1,
          mount: '13',
          unit: 'º',
          description: '12º / 14º',
          state: false,
        },
        {
          id: 2,
          mount: 'Cerrado',
          unit: '',
          description: 'Cerrado',
          state: false,
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
  .device-alerts {
    margin-bottom: 30px;
    justify-content: flex-start;
    .alert {
      border: 1px solid #EEE;
      box-shadow: 0 2px 10px 0 rgba(0,0,0,0.1);
      padding: 30px 20px;
      width: 120px;
      border-radius: 10px;
      text-align: center;
      margin-right: 20px;
      &.important {
        border: 1px dashed #DE2F2F;
        h2 {
          color: #DE2F2F;
        }
      }
      h2 {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 10px;
      }
      p {
        font-size: 10px;
        color: #222;
      }
    }
  }
</style>
