<section class='org-absences-overview'>
<div class='wrap-heading'>
<h2 class="atm-heading ">Eerdere afwezigheden</h2>
<div class='filter-year'>
<strong>Filter op Academiejaar</strong>
<select class="form-select " name="select" id="select">
<option value="0" selected>2020-2021</option>
<option value="1">2019-2020</option>
</select>
</div>
</div>
<div class="mol-absences-card previous">
<div class="wrapper">
<div class="column">
<div class="time-block">
<span class="date">
12/04/2021
</span>
<span>
t/m
</span>
<span class="date">
12/04/2021
</span>
</div>
</div>
<div class="column">
<div class="info-total">
<div>
Gevraagde examens
</div>
<div class="amount">
2
</div>
</div>
<div class="info-total">
<div>
Gevraagde inhaalexamens
</div>
<div class="amount">
2
</div>
</div>
<div class="info-total">
<div class='mol-tag tag-accept'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Goedgekeurd</span>
</div>
<div class="amount text-green">
1
</div>
</div>
<div class="info-total">
<div class='mol-tag tag-reject'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Afgekeurd</span>
</div>
<div class="amount text-red">
1
</div>
</div>
<div class="info-total">
<div class='mol-tag tag-applied'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Aangevraagd</span>
</div>
<div class="amount text-black-500">
1
</div>
</div>
</div>
<div class="column">
<div class="info-total">
<div>
Afwezig onderwijsactiviteiten
</div>
<div class="amount">
1
</div>
</div>
</div>
</div>
<a href="#" class="atm-button button-red ">
<span>
<span class="text">
Bekijk lopende afwezigheid
</span>
</span>
</a>
</div>
<div class="mol-absences-card previous">
<div class="wrapper">
<div class="column">
<div class="time-block">
<span class="date">
12/04/2021
</span>
<span>
t/m
</span>
<span class="date">
12/04/2021
</span>
</div>
</div>
<div class="column">
<div class="info-total">
<div>
Gevraagde examens
</div>
<div class="amount">
2
</div>
</div>
<div class="info-total">
<div>
Gevraagde inhaalexamens
</div>
<div class="amount">
2
</div>
</div>
<div class="info-total">
<div class='mol-tag tag-accept'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Goedgekeurd</span>
</div>
<div class="amount text-green">
1
</div>
</div>
<div class="info-total">
<div class='mol-tag tag-reject'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Afgekeurd</span>
</div>
<div class="amount text-red">
1
</div>
</div>
<div class="info-total">
<div class='mol-tag tag-applied'>
<span class="atm-icon fas fa-dot-circle " aria-hidden="true"></span>
<span>Aangevraagd</span>
</div>
<div class="amount text-black-500">
1
</div>
</div>
</div>
<div class="column">
<div class="info-total">
<div>
Afwezig onderwijsactiviteiten
</div>
<div class="amount">
1
</div>
</div>
</div>
</div>
<a href="#" class="atm-button button-red ">
<span>
<span class="text">
Bekijk lopende afwezigheid
</span>
</span>
</a>
</div>
</section>
<section class='org-absences-overview'>
<div class='wrap-heading'>
{{render '@app-heading--h2' heading merge=true}}
{{#if previous-absences}}
<div class='filter-year'>
<strong>Filter op Academiejaar</strong>
{{render '@app-select' filter-year merge=true}}
</div>
{{/if}}
</div>
{{#each card}}
{{render '@app-absences-card' status merge=true}}
{{/each}}
</section>
{
"heading": {
"text": "Eerdere afwezigheden"
},
"previous-absences": true,
"filter-year": {
"options": [
{
"value": "0",
"label": "2020-2021",
"selected": true
},
{
"value": "1",
"label": "2019-2020",
"selected": false
}
]
},
"card": [
{
"status": {
"modifier": "previous"
}
},
{
"status": {
"modifier": "previous"
}
}
]
}
.org-absences-overview {
.wrap-heading {
@apply md:flex md:flex-row md:items-center md:gap-6 mb-7;
.atm-heading {
@apply md:mb-0;
}
.filter-year {
@apply flex flex-nowrap gap-4 items-center;
@apply ml-auto;
}
}
.mol-absences-card {
@apply mb-8;
}
}
No notes defined.