example_markdown_evaluations.yaml

type: markdown
content: |
  <div>Evaluations</div>
    <table>
    {% set dates = state_attr('sensor.pronote_parent_fanny_evaluation','date')%}
    {% for i in range(0, dates | count, 1) %}
    <tr>
    {% if state_attr('sensor.pronote_parent_fanny_evaluation','acquisition_level')[i] == 'Expert' %}
    <td>
    <mark>
    {{ dates[i].split("/",1)[1] }}</mark></td>
    {% elif state_attr('sensor.pronote_parent_fanny_evaluation','acquisition_level')[i] == 'Maîtrise satisfaisante' %}
    <td><p>{{dates[i].split("/",1)[1]}}</p></td>
    {% elif state_attr('sensor.pronote_parent_fanny_evaluation','acquisition_level')[i] == 'Maîtrise insuffisante'  %}
    <td><strong>{{dates[i].split("/",1)[1]}}</strong></td>
    {% elif state_attr('sensor.pronote_parent_fanny_evaluation','acquisition_level')[i] == 'Absent'  %}
    <td><u>{{dates[i].split("/",1)[1]+'A'}}</u></td>
    {% else %}
    <td><em>{{dates[i].split("/",1)[1]}}</em></td>
    {% endif %}
    <td>{{ state_attr('sensor.pronote_parent_fanny_evaluation','subject')[i] }}</td>
    <td>{{ state_attr('sensor.pronote_parent_fanny_evaluation','acquisition_name')[i] }}</td>
  </tr>
  {% endfor %}
card_mod:
  style:
    .: |
      ha-card ha-markdown {
        padding:0px
      }
    ha-markdown $: |
      h1 {
          font-weight: normal;
          font-size: 24px;
      }
      div {
          background-color:rgb(100, 100, 100);
          padding: 12px 12px;
          color:white;
          font-weight:normal;
          font-size:1.2em;
            border-top-left-radius: 5px; 
            border-top-right-radius: 5px; 
      }
      table{
        border-collapse: collapse;
        font-size: 0.9em;
        font-family: Roboto;
        width: auto;
        outline: 0px solid #393c3d;
        margin-top: 10px;
      } caption {
          text-align: center;
          font-weight: bold;
          font-size: 1.2em;
      } td {
          padding: 5px 5px 5px 5px;
          text-align: left;
          border-bottom: 0px solid #1c2020;
      }
      tr {
          border-bottom: 0px solid #1c2020;
      }
      tr:nth-of-type(even) {
          background-color: rgb(54, 54, 54, 0.3);
      }
      tr:last-of-type {
          border-bottom: transparent;
      }
      mark {
          background: green;
          color: #222627;
          border-radius: 5px;
          padding: 5px;
      }
      span {
          background: red;
          color: #222627;
          border-radius: 5px;
          padding: 5px;
      }
      p {
          background: lightgreen;
          color: #222627;
          border-radius: 5px;
          padding: 5px;
      }
      strong {
          background: red;
          color: #222627;
          border-radius: 5px;
          padding: 5px;
      }
      em {
          background: yellow;
          color: #222627;
          border-radius: 5px;
          padding: 5px;
      }
      u {
          background: lightblue;
          color: #222627;
          border-radius: 5px;
          padding: 5px;
      }
      span {
          padding: 5px;
      }
      tr:nth-child(n+2) > td:nth-child(2) {
        text-align: left;
      }