example_markdown_punishments.yaml

type: markdown
content: |
  <div>Punishments</div>
    <table>
    {% set dates = state_attr('sensor.pronote_parent_fanny_punishment','date')%}
    <tr>
    <td><h4>Date<h3></td>
    <td><h4>ReasonCourse</td>
    <td><h4>Punishment</td>
    <td><h4>Duration</td>
    </tr>
    {% for i in range(0, dates | count, 1) %}
    <tr>
    {% if state_attr('sensor.pronote_parent_fanny_punishment','exclusion')[i] == '1' %}
    <td>
    <strong>
    {{ dates[i]}}</strong></td>
    {% else %}
    <td>{{dates[i]}}</td>
    {% endif %}
    <td>{{ state_attr('sensor.pronote_parent_fanny_punishment','reasons')[i] }}</td>
    <td>{{ state_attr('sensor.pronote_parent_fanny_punishment','nature')[i] }}</td>
    <td>{{ state_attr('sensor.pronote_parent_fanny_punishment','duration')[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;
      }