<template>
   <div>
  <div id="dropzone">
  <p class="2nd-floor">2ND FLOOR</p>
  <p class="empty-floor-message">This floor is empty. Upload a floor map.</p>
  <div class="Rectangle-Copy-6">
    <div class="outer-circle">
    <div class="Oval-6" id="drag-and-drop">
      <i class="fas fa-arrow-up fa-2x" id="arrow"></i>
    </div>
    </div>
   <div class="Drag-Drop-the-file">
   <h1>Drag & Drop</h1>
    <a class="fileContainer">the file <span class="browse">or browse</span><input type="file"></a>
   </div>

  </div>
     </div>
 </div>
</template>

<script>
import * as Dropzone from 'dropzone';

export default {
  mounted() {
     $("#dropzone").dropzone({
     url: '/upload',
     createImageThumbnails: true,
   });

  }
}
</script>


<style>
.Sofia-DC-2nd-floor {
  width: 266px;
  height: 29px;
  font-family: ProximaNova;
  font-size: 24px;
  font-weight: 900;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  margin: 0 auto;
  color: #000000;
}

.Rectangle-Copy-6 {
  width: 388px;
  height: 280px;
  border-radius: 8px;
  border: solid 2px#00a6ce;
  border-style: dashed;
  margin: 0 auto;
  padding: 15px;
}

.Drag-Drop-the-file {
  width: 225px;
  height: 56px;
  font-family: OpenSans;
  font-size: 14px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 2;
  letter-spacing: normal;
  color: #000000;
  margin: 0 auto;
  margin-top: 25px;
}


.empty-floor-message {
  width: 442px;
  height: 28px;
  font-family: OpenSans;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.56;
  letter-spacing: normal;
  text-align: center;
}


a.fileContainer {
  overflow: hidden;
  position: relative;
  display: inline-block;
}


a.fileContainer>input[type=file] {
  cursor: inherit;
  filter: alpha(opacity=0);
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: right;
}

.browse {
  text-decoration: underline;
  color: #00a6ce;
  font-weight: bold
}

a {
  font-size: 24px;
}

a:hover {
  cursor: pointer;
}

.Oval-6 {
  width: 82px;
  height: 82px;
  border: solid 3px #c8f4ff;
  border-radius: 50%;
  margin: 0 auto;
}

h1 {
  text-align: center;
}
#arrow {
  margin-left: 23px;
  margin-top: 23px;
  color: #C8F4FF;
}

</style>