<div class="office-hours">
<div class="office-hours__item">
<div class="office-hours__item-label day">Sunday: </div>
<div class="office-hours__item-slots">
<div class="time">5:08 pm-5:20 pm<span>, </span></div>
<div class="time">6:00 pm-6:30 pm<span>, </span></div>
</div>
</div>
<div class="office-hours__item">
<div class="office-hours__item-label day">Monday: </div>
<div class="office-hours__item-slots">
Closed
</div>
</div>
<div class="office-hours__item">
<div class="office-hours__item-label day">Tuesday: </div>
<div class="office-hours__item-slots">
<div class="time">8:00 am-8:50 am<span>, </span></div>
<div class="time">10:00 am-1:00 pm<span>, </span></div>
<div class="time">3:00 pm-3:05 pm<span>, </span></div>
</div>
</div>
<div class="office-hours__item">
<div class="office-hours__item-label day">Wednesday: </div>
<div class="office-hours__item-slots">
Closed
</div>
</div>
<div class="office-hours__item">
<div class="office-hours__item-label day">Thursday: </div>
<div class="office-hours__item-slots">
<div class="time">7:50 am-3:30 pm<span>, </span></div>
</div>
</div>
<div class="office-hours__item">
<div class="office-hours__item-label day">Friday: </div>
<div class="office-hours__item-slots">
Closed
</div>
</div>
<div class="office-hours__item">
<div class="office-hours__item-label day">Saturday: </div>
<div class="office-hours__item-slots">
Closed
</div>
</div>
</div>
<div class="office-hours">
{% for weekday in weekdays %}
<div class="office-hours__item">
<div class="office-hours__item-label day">{{ weekday.day }}: </div>
<div class="office-hours__item-slots">
{% if weekday.times %}
{% for time in weekday.times %}
<div class="time">{{ time.hour }}<span>, </span></div>
{% endfor %}
{% else %}
Closed
{% endif %}</div>
</div>
{% endfor %}
</div>
{
"weekdays": {
"1": {
"day": "Sunday",
"times": {
"1": {
"hour": "5:08 pm-5:20 pm"
},
"2": {
"hour": "6:00 pm-6:30 pm"
}
}
},
"2": {
"day": "Monday"
},
"3": {
"day": "Tuesday",
"times": {
"1": {
"hour": "8:00 am-8:50 am"
},
"2": {
"hour": "10:00 am-1:00 pm"
},
"3": {
"hour": "3:00 pm-3:05 pm"
}
}
},
"4": {
"day": "Wednesday"
},
"5": {
"day": "Thursday",
"times": {
"1": {
"hour": "7:50 am-3:30 pm"
}
}
},
"6": {
"day": "Friday"
},
"7": {
"day": "Saturday"
}
}
}
.office-hours {
&__item {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
&-label.day {
margin: 0 $space-one-quarter 0 0;
font-weight: bold;
}
&-slots {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
.time {
margin: 0 $space-one-quarter 0 0;
&:last-of-type {
margin: 0;
span {
display: none;
}
}
}
}
}
}
Display the Org Unit - Hours.