div#modal-container
//- div {{employees}}
//- TODO: #2 Can't highlight list-group-item when hovering
//- TODO: #3 Close Modal after successful input
table(class='table table-bordered table-sm' v-for="(row, rIndex) in scheduleData" :key="rIndex")
thead
tr
td(style="width: 100px" class="fw-bold") {{ format(startDate, "MMMM", {locale: de}) }}
td(v-for="(day, index) in weekdays" :key="index" :class="{'text-body text-opacity-50 bg-secondary bg-opacity-10' : row.dates[index] === null}") {{ day }}
tr
td.fw-bold {{ format(startDate, "y") }}
td(v-for="(date, dIndex) in row.dates" :key="dIndex" :class="{'bg-secondary bg-opacity-10' : row.dates[dIndex] === null}")
template(v-if="date !== null") {{ format(date, "dd.MM.")}}
tbody
tr(v-for="(employee, eIndex) in row.employees" :key="eIndex")
td {{employee.handle}}
button.btn.btn-outline-secondary.btn-sm(
@click="removeEmployee(rIndex, employee)"
)
i.bi.bi-trash
td(v-for="(date, dIndex) in row.dates" :key="dIndex" :class="{'bg-secondary bg-opacity-10' : row.dates[dIndex] === null}")
tr()
td(style="width: 250px")
button(
class="btn btn-outline-secondary btn-sm"
@click="onClickOpenModal(rIndex)"
)
i.bi.bi-plus-lg
td(v-for="(date, dIndex) in row.dates" :key="dIndex" :class="{'bg-secondary bg-opacity-10' : row.dates[dIndex] === null}")