<template>
  <v-container class="fill-height" fluid>
    <v-card color="#c7d7f6">
      <v-card-title class="card-title">
        {{ titulo }}
      </v-card-title>
      <v-row class="d-flex pa-4">
        <slot></slot>
      </v-row>
      <v-row class="d-flex pa-4" justify="end">
        <v-btn class="mx-0" color="#769fdb" size="large" @click="close">
          <template v-slot:prepend>
            <v-icon color="white" class="ml-1 mr-n2">mdi-cancel</v-icon>
          </template>
          <span style="color: #fff">Cancelar</span>
        </v-btn>
        <v-btn class="mx-4" color="#769fdb" size="large" type="submit">
          <template v-slot:prepend>
            <v-icon color="white" class="ml-1 mr-n2"
              >mdi-content-save-outline</v-icon
            >
          </template>
          <span style="color: #fff">Salvar</span>
        </v-btn>
      </v-row>
    </v-card>
  </v-container>
</template>

<script setup lang="ts">
defineProps({
  titulo: { type: String, default: "" }
});

const emit = defineEmits(["close"]);

const close = () => {
  emit("close");
};
</script>

<style>
.card-title {
  background-color: #769fdb;
  color: #ffffff;
}

.theme--light.v-input.search-field input::placeholder {
  color: green;
}

@media only screen and (max-width: 600px) {
  .container-btn-buscar {
    display: flex;
    justify-content: center !important;
  }

  .container-btn-buscar button {
    margin: auto 0 !important;
    width: 250px;
    margin-bottom: 20px !important;
  }

  .chips {
    width: 200px;
    display: flex;
    flex-direction: column;
  }

  .card-info {
    margin-left: 16px;
    height: 262px !important;
  }

  .card-chips {
    margin-right: 16px;
  }

  .text-subtitle-1.font-weight-bold {
    font-weight: 700 !important;
    font-size: 0.8rem !important;
  }
}
</style>
