openaustralia/planningalerts

<script props>
  module.exports = {
    address: props.address,
    description: props.description,
    distance: props.distance,
    map: props.map,
    url: props.url,
    map_alignment: props.map_alignment
  }
</script>

<if condition="map_alignment == 'right'">
  <table class="w-full group">
    <tr>
      <td valign="top" class="xs:w-full xs:inline-block">
        <h2 class="m-0 text-lg line-clamp-1 ">
          <a href="{{{ url }}}" class="focus:bg-sun-yellow text-fuchsia group-hover:text-fuchsia-darker dark-mode:text-white">
            {{{ address }}}
          </a>
        </h2>
        <if condition="distance">
          <p class="mt-0">
            <a href="{{{ url }}}" class="block no-underline text-navy dark-mode:text-white" style="text-decoration:none">
              {{{ distance }}}
            </a>
          </p>
        </if>
        <p class="my-0 line-clamp-4">
          <a href="{{{ url }}}" class="block no-underline text-navy dark-mode:text-white" style="text-decoration:none">
            {{{ description }}}
          </a>
        </p>
      </td>
      <!-- TODO: Need a space between the text and the map -->
      <td class="w-[150px] xs:w-full xs:inline-block xs:mt-4" valign="top">
        <a href="{{{ url }}}">
          <img alt="Map of {{{ address }}}" src="{{{ map }}}" width="150" height="150">
        </a>
      </td>
    </tr>  
  </table>
</if>
<else>
  <table>
    <tr>
      <td class="w-[180px] xs:w-full xs:inline-block" valign="top">
        <a href="{{{ url }}}">
          <img alt="Map of {{{ address }}}" src="{{{ map }}}" width="150" height="150">
        </a>
      </td>
      <td valign="top" class="xs:w-full xs:inline-block xs:mt-4">
        <h2 class="m-0 text-lg line-clamp-1">
          <a href="{{{ url }}}" class="text-fuchsia dark-mode:text-white group-hover:text-fuchsia-darker focus:bg-sun-yellow">
            {{{ address }}}
          </a>
        </h2>
        <p class="mt-0 line-clamp-6">
          <a href="{{{ url }}}" class="no-underline text-navy dark-mode:text-white" style="text-decoration:none">
            {{{ description }}}
          </a>
        </p>
      </td>
    </tr>
  </table>  
</else>