safing-web/_includes/project_tablecard.html

<div class="card-extended darkmode">
  <label class="card-label" for="tablecard-{{ include.state }}-{{ forloop.index }}">
      <div class="wrapper-left">
        <div class="flex">
          {% for tag in card.projects %}
            {% include tag.html tag=tag %}
          {% endfor %}
        </div>
        <div class="card-title">
            {% if include.state == 'done' %}
              <i class="icon-tick text-green-500"></i>
            {% elsif include.state == 'in_progress' %}
              <i class="icon-cog text-white"></i>
            {% elsif include.state == 'discarded' %}
              <i class="icon-cross text-red-500"></i>
            {% elsif include.state == 'postponed' %}
              <i class="icon-files text-white"></i>
            {% elsif include.state == 'backlog' %}
              <i class="icon-files text-white"></i>
            {% endif %}
            <h3 class="title">{{ card.title }}</h3>
        </div>
      </div>
      <div class="wrapper-right">
        <div class="wrapper-right-profiles">
          {% for member in card.team %}
            <div class="circular-profile" tooltip="{{ member | capitalize }}">
              <img src="{{ site.img_url }}profiles/{{ member | downcase }}.png" alt="{{ member | capitalize }}">
            </div>
          {% endfor %}
        </div>
        <i class="icon-arrow"></i>
      </div>
  </label>
  <input class="card-input-toggle" id="tablecard-{{ include.state }}-{{ forloop.index }}" type="checkbox">
  <div class="card-dropdown-toggle">
      <div class="card-dropdown-content markdown-container max-w-full pr-0">
          <div class="card">
              <label class="card-label" for="tablecard-description-{{ include.state }}-{{ forloop.index }}">
                  <div class="wrapper-left">
                      <div class="card-title">
                          <h1 class="title">Assignment</h1>
                      </div>
                  </div>
                  <div class="wrapper-right">
                      <i class="icon-arrow"></i>
                  </div>
              </label>
              <input class="card-input-toggle" id="tablecard-description-{{ include.state }}-{{ forloop.index }}" type="checkbox">
              <div class="card-dropdown-toggle">
                  <div class="card-dropdown-content">
                    {% for paragraph in card.description %}
                      <p>{{ paragraph }}</p>
                    {% endfor %}
                  </div>
              </div>
          </div>
          {% for tag in card.progress %}
            {% if tag.type == 'a' %}
              <p><{{ tag.type }} href='{{ tag.href }}'>{{ tag.text }}</{{tag.type}}></p>
            {% elsif tag.type == 'br' %}
              <br/>
            {% elsif tag.type == 'ol' %}
              <ol>
                {% for li in tag.lis %}
                  <li>{{ li }}</li>
                {% endfor %}
              </ol>
            {% elsif tag.type == 'ul' %}
              <ul>
                {% for li in tag.lis %}
                  <li>{{ li }}</li>
                {% endfor %}
              </ul>
            {% elsif tag.type == 'img' %}
              <img class="my-5" src="{{ tag.src }}"/>
            {% else %}
              <{{ tag.type }}>{{ tag.text }}</{{tag.type}}>
            {% endif %}
          {% endfor %}
      </div>
  </div>
</div>