<template>
  <v-dialog v-model="visible" :fullscreen="fullscreen" :max-width="!fullWidth ? maxWidth : ''" :persistent="persistent"
    :content-class="contentClass" :scrollable="scrollable">
    <v-card :class="{
        modal: true,
        cardOverflowHidden: !cardTextScrollable,
      }" :style="modalBackground ? `background-color: ${modalBackground};` : ''">
      <v-card-title primary-title class="pa-0">
        <v-toolbar v-if="toolbar" :color="toolbarColor" flat>
          <v-toolbar-title :class="titleColor">{{ title }}</v-toolbar-title>
          <template v-if="closeButton">
            <v-spacer />
            <v-row no-gutters fill-height justify="end" ma-0 pa-0 style="height: 100%">
              <v-toolbar-items style="height: 100%">
                <div style="height: 100%; display: inline-flex">
                  <slot name="toolbarItems"></slot>
                  <v-hover v-slot:default="{ hover }">
                    <v-btn dark tile elevation="0" :color="hover ? '#E81123' : toolbarColor" @click="closeModal()"
                      style="height: 100%">
                      <v-icon class="white--text">close</v-icon>
                    </v-btn>
                  </v-hover>
                </div>
              </v-toolbar-items>
            </v-row>
          </template>
        </v-toolbar>
      </v-card-title>
      <v-card-text :style="`max-height: ${maxHeightCardText}; ${
          !cardPadding ? 'padding: 0 !important' : ''
        }`">
        <slot>
          <span class="subheading" v-if="message !== ''">{{ message }}</span>
        </slot>
      </v-card-text>
      <v-card-actions v-if="showButtons" class="mb-1 mr-1">
        <v-spacer></v-spacer>
        <v-btn v-if="cancelButton" @click="closeModal()">{{
          $t("cancel")
          }}</v-btn>
        <v-btn v-if="okButton" color="primary" @click="ok()">{{
          $t("ok")
          }}</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script src="./modal.js"></script>
<style src="./modal.scss" lang="scss" scoped></style>