<template>
  <div v-resize="onResize">
    <span class="v-label v-label--active theme--light">
      {{ $ay.t("Attachments") }}
    </span>
    <v-row>
      <v-col cols="12" sm="8">
        <v-card class="mx-auto">
          <v-card-text>
            <div :style="cardTextStyle()">
              <v-list two-line>
                <v-list-item
                  v-for="item in items"
                  :key="item.title"
                  @click="aClick"
                >
                  <v-list-item-avatar>
                    <v-icon v-text="item.icon"></v-icon>
                  </v-list-item-avatar>

                  <v-list-item-content>
                    <v-list-item-title v-text="item.title"></v-list-item-title>
                    <v-list-item-subtitle
                      v-text="item.subtitle"
                    ></v-list-item-subtitle>
                  </v-list-item-content>

                  <v-list-item-action>
                    <v-btn icon>
                      <v-icon>fa-trash</v-icon>
                    </v-btn>
                  </v-list-item-action>
                </v-list-item>
              </v-list>
            </div>
          </v-card-text>

          <v-card-actions>
            <v-file-input
              :label="$ay.t('AttachFile')"
              prepend-icon="fa-paperclip"
            ></v-file-input>
            <v-text-field
              v-model="notes"
              :label="$ay.t('ImageDescription')"
            ></v-text-field>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </div>
</template>
<script>
export default {
  created() {},
  data() {
    return {
      height: 300,
      items: [
        {
          icon: "fa-file",
          title: "drawings.pdf",
          subtitle: "2020-01-09"
        },
        {
          icon: "fa-image",
          title: "Recipes",
          subtitle: "Jan 17, 2014"
        },
        {
          icon: "fa-pen",
          title: "Work",
          subtitle: "Jan 28, 2014"
        },
        {
          icon: "fa-file",
          title: "2drawings.pdf",
          subtitle: "2020-01-09"
        },
        {
          icon: "fa-image",
          title: "2Recipes",
          subtitle: "Jan 17, 2014"
        },
        {
          icon: "fa-pen",
          title: "2Work",
          subtitle: "Jan 28, 2014"
        },
        {
          icon: "fa-file",
          title: "3drawings.pdf",
          subtitle: "2020-01-09"
        },
        {
          icon: "fa-image",
          title: "3Recipes",
          subtitle: "Jan 17, 2014"
        },
        {
          icon: "fa-pen",
          title: "3Work",
          subtitle: "Jan 28, 2014"
        },
        {
          icon: "fa-file",
          title: "4drawings.pdf",
          subtitle: "2020-01-09"
        },
        {
          icon: "fa-image",
          title: "4Recipes",
          subtitle: "Jan 17, 2014"
        },
        {
          icon: "fa-pen",
          title: "4Work",
          subtitle: "Jan 28, 2014"
        }
      ],
      notes: null
    };
  },
  props: {
    ayaType: Number,
    ayaId: Number,
    readonly: Boolean
  },

  methods: {
    onResize() {
      this.height = window.innerHeight * 0.25;
    },
    cardTextStyle() {
      return "height: " + this.height + "px;overflow-y:auto;";
    },
    aClick() {
      console.log("CLICK");
    }
  }
};
</script>
