{?app}
<div class="app-card gradient" data-id="{app.name}">
  <div class="left-side">
    <div class="screenshot" style="top: 0px; "><img src="{burrowBase}{app.name}/screenshot.png"></div>
  </div>
  <div class="app-info">
    <p class="title">&nbsp;{app.title}</p>
    <p class="author"><a class="orange iframeLink" href="#" data-id="AppGallery-Author?author={app.author.name}">by {app.author.name}</a></p>
    <p class="uses">
     {?app.repository.uses.services}<span>This app uses:</span>
        <div class="provider-icons">
          <span class='connected-services'>
            {#connected}
            <img class="installed" src="{burrowBase}{.handle}/icon.png" alt="{.handle}" title="{.handle}" />
            {/connected}
          </span>
          <span class='unconnected-services'>
            {#unconnected}
            <a class="oauthLink" href="#" data-provider="{.handle}" data-height="{.oauthSize.height}" data-width="{.oauthSize.width}">
            <img src="{burrowBase}{.handle}/icon.png" alt="{.handle}" title="{.handle}" /></a>
            {/unconnected}
          </span>
        </div>
      {/app.repository.uses.services}
    </p>
  </div>
  <div class="bottom">
   {?app.actions}
   {?app.actions.add}
    <input type='button' id='{app.repository.handle}' class='install action-button' value='INSTALL' />
   {:else}
    <input type='button' class='uninstall action-button' value='UNINSTALL' />
   {/app.actions.add}
   {/app.actions}
  </div>
</div>
{/app}