{% assign json_data = data | where: "TRMNL_ID", trmnl.plugin_settings.custom_fields_values.device_id | first %}
{% assign my_id = trmnl.plugin_settings.custom_fields_values.device_id %}

{% if json_data %}

<div class="layout">
  <div class="columns">
    <div class="column">
      <div class="grid grid--cols-1 gap--large">
        <div class="title">

          <span class="value value--xlarge">{{ json_data.header }}</span>
        </div>
        <em> <span class="value value--med">{{ json_data.tagline }}</span></em>

        <div class="divider--h"></div>
        <div class="meta"></div>
        <div class="content">
          <ul><center><p class="label label--large">{{ json_data.info }}</p></center></ul>
        </div>
        <div class="flex flex--row">

          {% assign room_days = json_data.days | split: ','  %}
          {% for day in room_days %}

          <div style="font-family: sans-serif;
            text-transform: uppercase;
            font-size: 1.6rem;
            padding: 0.5rem 1.2rem;
            border: 2px solid #000;
            border-radius: 0.4rem;">
            {{ day }}
          </div>
          {% endfor %}
        </div>
        <center><p class="label text--center">{{json_data.note}}</p></center>
      </div>
    </div>
  </div>
</div>
<div class="title_bar">
  <!-- <img class="image" style="
  filter: grayscale(100%) brightness(30%);
  " src="https://gocrossings.org/wp-content/uploads/2020/03/cropped-favicon2-150x150.png">
  <span class="title">Cedarmore Camp and Conference Center</span>-->
  <img height="50px"style="
    filter: grayscale(100%) brightness(0%) ; float: right;" src="https://gocrossings.org/wp-content/uploads/2020/02/logo-white_1.png"/>
  <span class="instance"><p>DeviceID: {{ my_id }} Updated at {{ "now" | date: "%s" | plus: trmnl.user.utc_offset | date: "%H:%M" }}</p></span>
</div>
{% else %} <!-- If There is no json data just show the logo -->
<div class="layout layout--center">
  <img class="image-dither" style="
    filter: grayscale(100%)  brightness(70%) contrast(500%);" src="https://gocrossings.org/wp-content/uploads/2020/03/cedarmore.png"/>
</div>
{% endif %}