{?app.github}
<div class="my-app-card gradient" data-id="{app.name}">
  <div class="left-side">
    <div class="screenshot" style="top: 0px; "><img src="{app.github}/raw/master/screenshot.png"></div>
  </div>
  <div class="my-app-info">
    <p class="title">{app.title}{?connector}<img align=right class="type" src=img/icons/32px/connector.png>{/connector}</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.description}<span>{app.description}</span>{/app.description}
     {?app.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.uses.services}
    </p>
  </div>
  <div class="bottom">

<a class='action-button small-action-button fork-button' data-provider="github" data-id='{app.handle}' href='#'>FORK</a> <a href='#' class='action-button small-action-button edit-button ' data-provider="nide" data-id='{app.handle}' data-srcDir='{app.srcDir}'>EDIT</a> <a href="#" class="sync-button action-button small-action-button" data-provider="github">SYNC</a> <a class='action-button iframeLink small-action-button' data-id='Explore-Publish?app={app.handle}'>PUBLISH</a>


  </div>
</div>
{/app.github}