I'm building an message inbox that have different states (active, replied, new) per each inbox message. I want to add a class to these message cards based on data in my site.data.message-inbox.yml file. For example, I want to add a div with the active class if the yml file has active: yes in the parameters.
Also want to include conditional divs like a replied div if the yml files states replied:yes so that you see the arrow indicator like in the design file below.
I've tried the following:
{% for data in site.data.message-inbox %}
{% if site.data.message-inbox.active == no %}
<div class="message-card__content">
{% endif %}
<div class="message-card__content active">
<div class="message-card__avatar">
<img src="" alt="">
</div>
<ul class="message-card__info">
<li class="message-card__name">{{data.name}}</li>
<li class="message-card__subject">{{data.subject}}</li>
<li class="message-card__preview">{{data.message | truncate: 100 }}</li>
</ul>
<img class="message-card__reply" src="../images/icons/reply.svg" alt="">
</div>
</a>
{% endfor %}
and here is a snippet from my /_data/message-inbox.yml file:
- name: John Smith
subject: JLG 6TS Lift
message: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quidem id dolor tempora reprehenderit dignissimos velit distinctio sed eum, at culpa laborum, eius, laudantium consequuntur architecto debitis? Alias, repellat, illo.
active: yes
replied: yes
new: no
- name: John Smith
subject: JLG 6TS Lift
message: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores quidem id dolor tempora reprehenderit dignissimos velit distinctio sed eum, at culpa laborum, eius, laudantium consequuntur architecto debitis? Alias, repellat, illo.
active: no
replied: yes
new: no