Conditional Jekyll Liquid class based on _data file

Question

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

Answer 1

The following should render markup similar to your graphic..

{% for message in site.data.message-inbox %}
  <div class="message-card__content {% if message.active == 'yes' %}active{% endif %}">
    <div class="message-card__meta">
      <div class="message-card__avatar">
        <img src="{{ message.avatar }}" alt="{{ message.name }}">
      </div>

      {% if message.new == 'yes' %}
        <img class="message-card__new" src="{{ 'images/icons/new.svg' | relative_url }}" alt="New Message">
      {% elsif message.replied == 'yes' %}
        <img class="message-card__reply" src="{{ 'images/icons/reply.svg' | relative_url }}" alt="Replied">
      {% endif %}
    </div>

    <div class="message-card__info">
      <ul>
        <li class="message-card__name">{{ message.name }}</li>
        <li class="message-card__subject">{{ message.subject }}</li>
        <li class="message-card__preview">{{ message.message | truncate: 100 }}</li>
      </ul>
    </div>
  </div>
{% endfor %}