<div tal:condition="view/condition" class="tile app ${context/devices} app-${view/get_class} ${view/disabled} ${python:view.counter and 'has-counter' or ''}">
    <a class="link ${view/modal} ${view/inject}"
       href="${view/url}"
       data-pat-switch="selector: #app-space; remove: state-*; add: state-on"
       data-pat-inject="${view/pat_inject_options}"
       data-pat-modal="${python: view.modal and 'class: small' or None}"
       tal:define="is_icon python:view.get_class().startswith('icon-')"
    >
      <strong class="tile-title pat-auto-scale ${view/get_class}">${view/app_view/title|context/title}</strong>

      <img class="placeholder" src="${here/portal_url}/++theme++ploneintranet.theme/generated/assets/quaive/placeholders/placeholder-1x1.png" alt="" />

      <img class="icon app-icon app-${view/get_class}"
           src="${view/icon_url}"
           alt="${context/title}"
           tal:condition="python:not is_icon"
      />
      <sup tal:condition="view/counter|nothing"
           class="counter digit-${view/digits}">${view/counter}</sup>
      <p class="calendar-date pat-auto-scale"
          tal:define="
            now view/date;
            date2month_name nocall:here/@@proto/date2month_name;
          "
          tal:condition="python:context.id=='calendar'">
        <span class="date">${python:now.strftime('%-d')}</span>
        <span class="month">${python:date2month_name(now, short=True).upper()}</span>
      </p>

    <tal:link tal:condition="context/app" replace="structure context/bookmark-link-iconified" />
    </a>
</div>
