#IF(#epagesjError EQ "true")
#ELSE
  #LOCAL("Scope", "")#LOCAL("uninstall_link_terminated_app","")#LOCAL("install_link","")#LOCAL("uninstall_link","")#LOCAL("uninstall_link_blocked_app","")#LOCAL("open_link","")#LOCAL("install_theme_link","")
  <div class="Dialog ep-appdialog-detailsdialog">
    #IF(#App.terminated)
      <div class="ep-notification-info">
        <h3>{TerminatedAppHeadline}</h3>
        <p>{TerminatedAppMessage}</p>
      </div>#REM <!-- .ep-notification-info --> #ENDREM
    #ENDIF

    <div class="AppDetailsheadline">
      <div class="headline">
        <img src="#App.iconUrl" alt="#App.name" title="#App.name" id="AppIcon" />
        <h2 class="ep-appdialog-headline-title">#App.name</h2>
        <div class="TextWeak">{DevelopedBy}: #App.developer</div>
      </div>
      <div class="app-button">
        #LOOP(#AppLinks.links)
          #IF(#rel EQ "installApp")
            #SET("install_link",#href)
          #ENDIF
          #IF(#rel EQ "uninstallApp")
            #SET("uninstall_link",#href)
          #ENDIF
          #IF(#rel EQ "removeApp")
            #IF(#App.terminated)
              #SET("uninstall_link_terminated_app",#href)
            #ELSE
              #SET("uninstall_link_blocked_app",#href)
            #ENDIF
          #ENDIF
          #IF(#rel EQ "openApp")
           #SET("open_link",#href)
          #ENDIF
          #IF(#rel EQ "installTheme")
            #SET("install_theme_link",#href)
          #ENDIF
        #ENDLOOP

        #IF(#install_link)
          #LOOP(#FROMPLAINLOOP(#App.scopes))
            #IF(#Element EQ "products_read") #SET("Scope",#Scope."products_read,") #ENDIF
            #IF(#Element EQ "products_read_batch") #SET("Scope",#Scope."products_read_batch,") #ENDIF
            #IF(#Element EQ "products_write") #SET("Scope",#Scope."products_write,") #ENDIF
            #IF(#Element EQ "carts_read") #SET("Scope",#Scope."carts_read,") #ENDIF
            #IF(#Element EQ "carts_write") #SET("Scope",#Scope."carts_write,") #ENDIF
            #IF(#Element EQ "orders_read") #SET("Scope",#Scope."orders_read,") #ENDIF
            #IF(#Element EQ "orders_write") #SET("Scope",#Scope."orders_write,") #ENDIF
            #IF(#Element EQ "customers_read") #SET("Scope",#Scope."customers_read,") #ENDIF
            #IF(#Element EQ "customers_write") #SET("Scope",#Scope."customers_write,") #ENDIF
            #IF(#Element EQ "legal_read") #SET("Scope",#Scope."legal_read,") #ENDIF
            #IF(#Element EQ "legal_write") #SET("Scope",#Scope."legal_write,") #ENDIF
            #IF(#Element EQ "newsletters_read") #SET("Scope",#Scope."newsletters_read,") #ENDIF
            #IF(#Element EQ "newsletters_write") #SET("Scope",#Scope."newsletters_write,") #ENDIF
            #IF(#Element EQ "coupons_read") #SET("Scope",#Scope."coupons_read,") #ENDIF
            #IF(#Element EQ "coupons_write") #SET("Scope",#Scope."coupons_write,") #ENDIF
            #IF(#Element EQ "scripttags_read") #SET("Scope",#Scope."scripttags_read,") #ENDIF
            #IF(#Element EQ "scripttags_write") #SET("Scope",#Scope."scripttags_write,") #ENDIF
          #ENDLOOP
          <form target="_blank" style="margin-top: 30px;" action="?ChangeAction=SubmitAppConsent&amp;ObjectID=#ObjectID" method="post" class="ep-js ep-appdialog-appbutton-form data-js=".uiForm({showSaveWarn:true})">
            <input type="hidden" name="appID" value="#INPUT.appID" />
            <input type="hidden" name="scope" value="#Scope" />
            <input type="hidden" name="devApp" value="0" />

            <input type="hidden" name="RedirectViewAction" value="#INPUT.RedirectViewAction" />
            <input type="hidden" name="RedirectViewObjectID" value="#INPUT.RedirectViewObjectID" />
            <input type="hidden" name="InstantInstallation" value="1" />
            <button id="ep-app-install-button" class="ep-button ep-button-cta">{UnityInstallApp}</button>
          </form>
        #ENDIF

        #IF(#install_theme_link)
          #IF(#App.price EQ "free")
            <a class="ep-appdialog-detailsdialog-link-donttouch" href="#install_theme_link" target="_blank"><button class="ep-button ep-button-save">{ToOpen}</button></a>
          #ELSE
            <a class="ep-appdialog-detailsdialog-link-donttouch" href="#install_theme_link" target="_blank"><button class="ep-button ep-button-save">{Buy}</button></a>
          #ENDIF
        #ENDIF

        #IF(#open_link)
          <a class="ep-appdialog-detailsdialog-link-donttouch" href="#open_link" target="_blank">
            <button class="ep-button ep-button-save">
              #IF(#App.appType EQ "AFFILIATE")
              {ToOpen}
              #ELSE
              {OpenApp}
              #ENDIF
            </button>
          </a>
        #ENDIF

        #IF(#uninstall_link_terminated_app)
          <a class="ep-appdialog-detailsdialog-link-donttouch" href="#uninstall_link_terminated_app">
            <button class="ep-button ep-button-cta ep-button-default">
              {TerminateApp}
            </button>
          </a>
        #ENDIF
      </div> #REM <!-- .app-button --> #ENDREM
    </div> #REM <!-- .AppDetailsheadline --> #ENDREM

    <div class="AppDetails">
      <div class="content">
        #IF(#App.video)
          <iframe width="760" height="430" src="#App.video" frameborder="0" allowfullscreen></iframe>
        #ENDIF
        <ul id="AppDetailImages">
          #LOCAL("firstimagelarge_url","")
            #LOCAL("firstimage","0")
              #LOOP(#App.images)
                #IF(#firstimage EQ "0")
                  #LOOP(#image)
                    #IF(#classifier EQ "large")
                      #SET("firstimagelarge_url",#url)
                    #ENDIF
                  #ENDLOOP
                #ENDIF
                #SET("firstimage","1")
              #ENDLOOP
            #ENDLOCAL #REM <!-- #firstimage --> #ENDREM

            #IF(NOT #App.video)
              <li class="app-detail-image-no-video">
                <a class="ep-appdialog-detailsdialog-link-donttouch" href="#">
                  <img itemprop="image" src="#firstimagelarge_url" data-src-l="#firstimagelarge_url"/>
                </a>
              </li>
            #ENDIF
          #ENDLOCAL #REM <!-- #firstimagelarge_url --> #ENDREM

          #LOCAL("showimage","1")
            #IF(NOT #App.video)
              #SET("showimage","0")
            #ENDIF

            #LOOP(#App.images)
              #IF(#showimage EQ "1")
                #LOCAL("small_url","")
                #LOCAL("large_url","")
                  #LOOP(#image)
                    #IF(#classifier EQ "small")
                      #SET("small_url",#url)
                    #ELSIF(#classifier EQ "large")
                      #SET("large_url",#url)
                    #ENDIF
                  #ENDLOOP
                  <li>
                    <a class="ep-appdialog-detailsdialog-link-donttouch" href="#">
                      <img itemprop="image" src="#small_url" data-src-l="#large_url"/>
                    </a>
                  </li>
                #ENDLOCAL #REM <!-- #small_url --> #ENDREM
                #ENDLOCAL #REM <!-- #large_url --> #ENDREM
              #ENDIF
              #SET("showimage","1")
            #ENDLOOP
          #ENDLOCAL #REM <!-- #showimage --> #ENDREM
        </ul> #REM <!-- .AppDetailImages --> #ENDREM

        <div id="AppDetailSlideshow" class="HideElement"></div>
        <div id="AppDetailThumbs" style="width: 100%;"></div>

        <h3>{KeyFeatures}</h3>
        <ul class="LeftPaddingWide">
          #LOOP(#FROMPLAINLOOP(#App.features))
            <li>#Element</li>
          #ENDLOOP
        </ul>

        <h3>{Description}</h3>
        <div id="detail-description">
          #App.description[markdown]
        </div>
      </div> #REM <!-- .content --> #ENDREM

      <div class="meta">
        <div class="metainfo">
          #IF(#System.ShowAppStorePriceOnAppDetails AND (#install_link  OR  #install_theme_link))
            <h3>{Price}</h3>
            #IF(#App.price EQ "free")
             <div class="value">{Free}</div>
            #ELSE
              <div class="value">#App.price</div>
            #ENDIF
          #ENDIF

          <h3>{Requirements}</h3>
          <p>#App.requirements</p>

          <h3>{Support}</h3>
          <p>
            <a class="TruncateText DisplayBlock ep-appdialog-detailsdialog-link-donttouch" title="#App.supportEmail" href="mailto:#App.supportEmail"><i class="fa fa-envelope RightPaddingSmall "></i>#App.supportEmail</a>
            #IF(#App.supportWebsite)
              <a class="TruncateText DisplayBlock ep-appdialog-detailsdialog-link-donttouch" title="#App.supportWebsite" href="#App.supportWebsite" target="_blank"><i class="fa fa-globe RightPaddingSmall"></i>#App.supportWebsite</a>
            #ENDIF
          </p>
        </div> #REM <!-- .metainfo --> #ENDREM

        #IF(#install_link)
          <h3>{ThisAppWillBeAbleTo}</h3>
          #LOOP(#FROMPLAINLOOP(#App.scopes))
            <i class="fa fa-check-square-o" style="color: #6ca80d;"></i>
            <span class="LeftPaddingSmall">
              #IF(#Element EQ "products_read"){RoleProductsRead}#ENDIF
              #IF(#Element EQ "products_read_batch"){RoleProductsReadBatch}#ENDIF
              #IF(#Element EQ "products_write"){RoleProductsWrite}#ENDIF
              #IF(#Element EQ "carts_read"){RoleCartRead}#ENDIF
              #IF(#Element EQ "carts_write"){RoleCartWrite}#ENDIF
              #IF(#Element EQ "orders_read"){RoleOrdersRead}#ENDIF
              #IF(#Element EQ "orders_write"){RoleOrdersWrite}#ENDIF
              #IF(#Element EQ "customers_read"){RoleCustomerRead}#ENDIF
              #IF(#Element EQ "customers_write"){RoleCustomerWrite}#ENDIF
              #IF(#Element EQ "legal_read"){RoleLegalRead}#ENDIF
              #IF(#Element EQ "legal_write"){RoleLegalWrite}#ENDIF
              #IF(#Element EQ "newsletters_read"){RoleNewslettersRead}#ENDIF
              #IF(#Element EQ "newsletters_write"){RoleNewslettersWrite}#ENDIF
              #IF(#Element EQ "coupons_read"){RoleCouponRead}#ENDIF
              #IF(#Element EQ "coupons_write"){RoleCouponWrite}#ENDIF
              #IF(#Element EQ "scripttags_read"){RoleScripttagsRead}#ENDIF
              #IF(#Element EQ "scripttags_write"){RoleScripttagsWrite}#ENDIF
            </span>
            <br />
          #ENDLOOP
        #ENDIF

        #IF(#uninstall_link)
          <a class="ep-appdialog-detailsdialog-link-donttouch" href="#uninstall_link"><i class="fa fa-trash"></i> {UninstallApp}</a>
        #ENDIF
        #IF(#uninstall_link_blocked_app)
        <a class="ep-appdialog-detailsdialog-link-donttouch" href="#uninstall_link_blocked_app"><i class="fa fa-trash"></i> {UninstallApp}</a>
        #ENDIF
      </div> #REM <!-- .meta --> #ENDREM
    </div> #REM <!-- .AppDetails --> #ENDREM
  </div> #REM <!-- .Dialog --> #ENDREM

  <script type="text/javascript">
    require([
      "jquery",
      "ep/ui/core",

      "jquery/event/special/dom",
      "ep/ui/thumbbox",
      "ep/ui/lightbox",
      "$ready!"
    ], function ($, ep) {
        var slideShow = ep('#AppDetailSlideshow');
      #IF(#ImgPosition EQ "left" OR #ImgPosition EQ "right")
        var box = slideShow.closest('.AppDetailImage'),
          resize = function(){
            slideShow.css({
              "max-height": (#IF(#ImgFormat EQ "vertical") 2 * #ENDIF slideShow.width()) + "px"
            });
          };
        box.on("resize", resize);
        resize();
      #ELSE
        slideShow.css({
          "max-height": "350px"
        });
      #ENDIF
        slideShow
          .uiLightbox({
            images        : '#AppDetailImages img',
            caption       : false,
            count         : false,
            controls      : 'visible',
            thumbs        : #IF(#Shop.DisplayThumbsInZoomView) true #ELSE false #ENDIF
          });
      #IF(#UseSlideshow AND #COUNT(#ImagesSlideShow) > 1)
        ep('#AppDetailThumbs')
          .uiThumbbox({
            images        : '#AppDetailImages img',
            view          : 'list',
            width         : 50,
            height        : 50
         });
      #ENDIF
      });


    // App handling from outside this document.
    require([
      'jquery',

      '$ready!'
    ], function($) {
      var receiveMessage = function(event) {
            if (event.origin !== "#Shop.WebUrlUnitySSL") {
              console.error('ERROR: No identical URLs of source and target!');
              return;
            }

            switch(event.data.type) {
              case 'MBO_INSTALL_APP':
                if (event.data.payload) {
                  $('#ep-app-install-button')
                    .prop('disabled', true);
                }
                break;
            }
          };

      // global variable to identify if open link is active/inactive
      window.openLink = #IF(#open_link)true#ELSE#SPACE[0]false#ENDIF;

      // add event listener for postMessages from install dialog
      window.addEventListener("message", receiveMessage, false);

      // prepare links to be opened in new tab
      $('.ep-appdialog-detailsdialog a:not(.ep-appdialog-detailsdialog-link-donttouch)').each(function(index, elem) {
        var $elem = $(elem);

        // replace protocol with the protocol used from the iframe
        elem.href = elem.href.replace(/http:/, location.protocol);
        // open link in new tab
        elem.target = '_blank';
      });
    });
  </script>
  #ENDLOCAL#ENDLOCAL#ENDLOCAL#ENDLOCAL#ENDLOCAL#ENDLOCAL#ENDLOCAL
#ENDIF