.mx-auto.w-90p.py-6#modelpage(class="sm:px-6 lg:px-8 md:max-w-7xl")
.relative.z-10(aria-labelledby="modal-title", role="dialog", aria-modal="true" v-if="boxReport")
.fixed.inset-0.bg-gray-900.bg-opacity-90.transition-opacity
.fixed.inset-0.z-10.overflow-y-auto
.flex.min-h-full.items-end.justify-center.p-4.text-center(class="sm:items-center sm:p-0")
.relative.transform.overflow-hidden.rounded-lg.bg-white.text-left.shadow-xl.transition-all(class="sm:my-8 sm:w-full sm:max-w-lg")
.bg-white.px-4.pt-5.pb-4(class="sm:p-6 sm:pb-4")
div(v-if="isLogged")
label.block.text-sm.font-medium.text-gray-700(for="warning_note") Note
.mt-1
textarea#description.mt-1.block.w-full.rounded-md.border-gray-300.border-1.px-2.py-1(
name="warning_note" rows="3"
class="focus:border-green-500 focus:ring-green-500 sm:text-sm"
placeholder="'This model is so ugly!' That's an example of a bad report."
v-model="report.warning_note"
required
)
div(v-else)
h2 You must log in first.
.bg-gray-50.px-4.py-3(class="sm:flex sm:flex-row-reverse sm:px-6")
button.inline-flex.w-full.justify-center.rounded-md.border.border-transparent.bg-green-600.px-4.py-2.text-base.font-medium.text-white.shadow-sm(
type="button"
:class="{'hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm': true, 'opacity-25 cursor-default': isLoading}"
:disabled="isLoading" :readonly="isLoading" v-if="isLogged"
@click="sendReport"
)
| Send report
button.mt-3.inline-flex.w-full.justify-center.rounded-md.border.border-gray-300.bg-white.px-4.py-2.text-base.font-medium.text-gray-700.shadow-sm(
type="button"
class="hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
@click="boxReport = false"
) Cancel
.relative.z-10(aria-labelledby="modal-title", role="dialog", aria-modal="true" v-if="boxDeleteModel")
.fixed.inset-0.bg-gray-900.bg-opacity-90.transition-opacity
.fixed.inset-0.z-10.overflow-y-auto
.flex.min-h-full.items-end.justify-center.p-4.text-center(class="sm:items-center sm:p-0")
.relative.transform.overflow-hidden.rounded-lg.bg-white.text-left.shadow-xl.transition-all(class="sm:my-8 sm:w-full sm:max-w-lg")
.bg-white.px-4.pt-5.pb-4(class="sm:p-6 sm:pb-4")
div(class="sm:flex sm:items-start")
.mx-auto.flex.h-12.w-12.flex-shrink-0.items-center.justify-center.rounded-full.bg-red-100(class="sm:mx-0 sm:h-10 sm:w-10")
svg.h-6.w-6.text-red-600(xmlns="http://www.w3.org/2000/svg", fill="none", viewbox="0 0 24 24", stroke-width="1.5", stroke="currentColor", aria-hidden="true")
path(stroke-linecap="round", stroke-linejoin="round", d="M12 10.5v3.75m-9.303 3.376C1.83 19.126 2.914 21 4.645 21h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 4.88c-.866-1.501-3.032-1.501-3.898 0L2.697 17.626zM12 17.25h.007v.008H12v-.008z")
.mt-3.text-center(class="sm:mt-0 sm:ml-4 sm:text-left")
h3#modal-title.text-lg.font-medium.leading-6.text-gray-900 Are you sure?
.mt-2
p.text-sm.text-gray-500
| Model data and all of the files will be deleted. This action cannot be undone.
.bg-gray-50.px-4.py-3(class="sm:flex sm:flex-row-reverse sm:px-6")
button.inline-flex.w-full.justify-center.rounded-md.border.border-transparent.bg-red-600.px-4.py-2.text-base.font-medium.text-white.shadow-sm(
type="button"
:class="{'hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm': true, 'opacity-25 cursor-default': isLoading}"
:disabled="isLoading"
:readonly="isLoading"
@click="deleteModel"
)
| Yes, confirm
button.mt-3.inline-flex.w-full.justify-center.rounded-md.border.border-gray-300.bg-white.px-4.py-2.text-base.font-medium.text-gray-700.shadow-sm(
type="button"
class="hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
@click="boxDeleteModel = !boxDeleteModel"
) Cancel
section.mb-5
.flow-root
.float-left
h1.text-3xl.font-bold.border-green-500.border-b-2.pb-3.w-full.mb-2(class="md:w-max md:mb-0") {{ model.name }}
.float-right(v-if="model.author")
.flex
.mr-3.float-left
user-avatar(:data="model.author")
p.leading-8
a.text-green-800(class="hover:text-green-700" :href="'/user/'+model.author_id")
| @
span.underline {{ model.author.username }}
.description.mt-3
p {{ model.description }}
.mb-5.text-right
button.inline-flex.leading-6.justify-center.rounded-md.border.border-transparent.bg-yellow-600.py-2.px-4.mr-2.text-sm.font-medium.text-white.shadow-sm(
class="hover:bg-yellow-700 focus:outline-none focus:ring-2 focus:ring-yellow-500 focus:ring-offset-2"
@click="boxReport = true"
)
| Report
a.inline-flex.leading-6.justify-center.rounded-md.border.border-transparent.bg-gray-600.py-2.px-4.mr-2.text-sm.font-medium.text-white.shadow-sm(
class="hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2"
:href="'/models/'+model.id+'/edit'" v-if="me && me.id == model.author_id"
)
| Edit
button.inline-flex.leading-6.justify-center.rounded-md.border.border-transparent.bg-red-600.py-2.px-4.text-sm.font-medium.text-white.shadow-sm(
class="hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
@click="boxDeleteModel = !boxDeleteModel" v-if="me && me.id == model.author_id"
)
| Delete
model-reports-list(:model="model.id" v-if="me && model.id")
.images.shadow-sm.rounded-lg.bg-white.p-4.w-full(v-if="model.uploads")
.block.gap-4.h-full(class="md:flex")
.w-full(class="md:w-4/5")
.image.bg-gray-900.border-2.rounded-xl.w-full.h-full.overflow-hidden(v-if="model.uploads && model.uploads[selectedUpload]")
file-preview(:path="model.uploads[selectedUpload].filepath" bg="#111827" controls="1")
.w-full.mt-8.h-auto(class="md:w-1/5 md:mt-0" v-if="model")
.grid.grid-cols-3.gap-4.h-full.overflow-y-auto.grid-mini(class="md:grid-cols-2")
.border-2.border-gray-300.bg-gray-300.w-20.h-20.rounded-xl.grid.items-center.justify-items-center.overflow-hidden.cursor-pointer(
v-for="upload, i in model.uploads"
:key="upload.id"
:class="{'md:w-24 md:h-24': true, 'border-green-700': selectedUpload == i}"
@click="selectedUpload = i"
)
file-preview(:path="upload.filepath")
section.mt-5
.grid.grid-cols-2.gap-5.mb-5(class="md:grid-cols-6")
.card.shadow-sm.rounded-lg.bg-white.p-4.w-full
h3.font-bold Created:
p(:title="model.created|moment('DD/MM/YYYY HH:mm')") {{ model.created|moment("DD/MM/YYYY") }}
.card.shadow-sm.rounded-lg.bg-white.p-4.w-full
h3.font-bold Duration:
p {{ model.duration }}m
.card.shadow-sm.rounded-lg.bg-white.p-4.w-full
h3.font-bold Height:
p {{ model.height }}mm
.card.shadow-sm.rounded-lg.bg-white.p-4.w-full
h3.font-bold Weight:
p {{ model.weight }}g
.card.shadow-sm.rounded-lg.bg-white.p-4.w-full(v-if="model.printer")
h3.font-bold Printer:
p {{ model.printer }}
.card.shadow-sm.rounded-lg.bg-white.p-4.w-full(v-if="model.material")
h3.font-bold Material:
p {{ model.material }}
button.card.shadow-sm.rounded-lg.bg-green-700.text-white.p-4.w-full.duration-200(
:class="{'hover:shadow-lg hover:bg-green-800': true, 'rounded-b-none': boxFilesToDownload}"
v-if="model.uploads"
@click="boxFilesToDownload = !boxFilesToDownload"
)
span(v-if="!boxFilesToDownload") Show files ({{ model.uploads.length }})
span(v-else) Close files box ({{ model.uploads.length }})
.bg-green-50(v-if="boxFilesToDownload")
ul.divide-y.divide-gray-200.rounded-b-md.border.border-gray-200(role="list")
li.flex.items-center.justify-between.py-3.pl-3.pr-4.text-sm(v-for="upload in model.uploads" :key="upload.id")
.flex.w-0.flex-1.items-center
svg.h-5.w-5.flex-shrink-0.text-gray-400(xmlns="http://www.w3.org/2000/svg", viewbox="0 0 20 20", fill="currentColor", aria-hidden="true")
path(fill-rule="evenodd", d="M15.621 4.379a3 3 0 00-4.242 0l-7 7a3 3 0 004.241 4.243h.001l.497-.5a.75.75 0 011.064 1.057l-.498.501-.002.002a4.5 4.5 0 01-6.364-6.364l7-7a4.5 4.5 0 016.368 6.36l-3.455 3.553A2.625 2.625 0 119.52 9.52l3.45-3.451a.75.75 0 111.061 1.06l-3.45 3.451a1.125 1.125 0 001.587 1.595l3.454-3.553a3 3 0 000-4.242z", clip-rule="evenodd")
span.ml-2.w-0.flex-1.truncate {{ getFileName(upload.filepath) }}
.ml-4.flex-shrink-0
a.font-medium.text-black-700(:href="baseAPI + '' + upload.filepath" target="_new" download class="hover:underline") Download