{% extends 'admin/layout.html.twig' %}

{% set menu = 'admin_wechat_app' %}

{% block main %}
  <div class="wechat-app-banner">
    <div class="banner-content">
      <h3 class="banner-title">
        {{ 'admin.wechat_app.banner_title'|trans }}
      </h3>
      <p class="banner-introduce">
        {{ 'admin.wechat_app.banner_introduce'|trans }}
      </p>

      {% if not purchased %}
        <a class="btn btn-primary" href="javascript: window.open('{{path('admin_wechat_app_access')}}')">{{ 'admin.wechat_app.access_btn'|trans }}</a>
      {% elseif purchased and not installed %}
        <a href="#" data-toggle="modal" data-target="#modal" data-url="{{path('admin_app_package_update_modal', {'id': latestPackageId, 'type': 'install'})}}" class="btn btn-primary app-btn" data-keyboard="false" data-backdrop="static">{{ 'admin.wechat_app.install_btn'|trans }}</a>
      {% endif %}
    </div>
  </div>
  <div class="wechat-app-introduction row">
    <div class="col-md-3 col-sm-4 col-xs-6">
      <div class="introduction-box" {% if lang|default(null) == 'en' %}style="height: 336px;"{% endif %}>
        <img class="introduction-icon" src="{{ asset('static-dist/app/img/admin/wechat-app/fast-access.png') }}"
          srcset="{{ asset('static-dist/app/img/admin/wechat-app/fast-access.png') }} 1x, {{ asset('static-dist/app/img/admin/wechat-app/fast-access@2x.png') }} 2x"/>
        <h4 class="introduction-title">{{ 'admin.wechat_app.fast_access_introduction_title'|trans }}</h4>
        <p class="introduction-content">{{ 'admin.wechat_app.fast_access_introduction_content'|trans }}</p>
      </div>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
      <div class="introduction-box" {% if lang|default(null) == 'en' %}style="height: 336px;"{% endif %}>
        <img class="introduction-icon" src="{{ asset('static-dist/app/img/admin/wechat-app/data-synchronization.png') }}"
          srcset="{{ asset('static-dist/app/img/admin/wechat-app/data-synchronization.png') }} 1x, {{ asset('static-dist/app/img/admin/wechat-app/data-synchronization@2x.png') }} 2x"/>
        <h4 class="introduction-title">{{ 'admin.wechat_app.data_sync_introduction_title'|trans }}</h4>
        <p class="introduction-content">{{ 'admin.wechat_app.data_sync_introduction_content'|trans }}</p>
      </div>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
      <div class="introduction-box" {% if lang|default(null) == 'en' %}style="height: 336px;"{% endif %}>
        <img class="introduction-icon" src="{{ asset('static-dist/app/img/admin/wechat-app/flow-entrance.png') }}"
          srcset="{{ asset('static-dist/app/img/admin/wechat-app/flow-entrance.png') }} 1x, {{ asset('static-dist/app/img/admin/wechat-app/flow-entrance@2x.png') }} 2x"/>
        <h4 class="introduction-title">{{ 'admin.wechat_app.flow_entrance_introduction_title'|trans }}</h4>
        <p class="introduction-content">{{ 'admin.wechat_app.flow_entrance_introduction_content'|trans }}</p>
      </div>
    </div>
    <div class="col-md-3 col-sm-4 col-xs-6">
      <div class="introduction-box" {% if lang|default(null) == 'en' %}style="height: 336px;"{% endif %}>
        <img class="introduction-icon" src="{{ asset('static-dist/app/img/admin/wechat-app/easy-promotion.png') }}"
          srcset="{{ asset('static-dist/app/img/admin/wechat-app/easy-promotion.png') }} 1x, {{ asset('static-dist/app/img/admin/wechat-app/easy-promotion@2x.png') }} 2x"/>
        <h4 class="introduction-title">{{ 'admin.wechat_app.easy_promotion_introduction_title'|trans }}</h4>
        <p class="introduction-content">{{ 'admin.wechat_app.easy_promotion_introduction_content'|trans }}</p>
      </div>
    </div>
  </div>
{% endblock %}
