extends ../layouts/basic

block variablesLang
    include ./_variablesLang.jade

block extra_head
    title Cheat Sheet - Apache ECharts

block content
    nav(class='navbar navbar-default navbar-fixed-top', role="navigation")
        include ./nav

    .page-main
        .page-info
            h1 Cheat Sheet
            p Learn the component names quickly.
            p.page-info-echarts Apache ECharts<sup>TM</sup>

        .page-content.container.page-cheatsheet
            h2 Frequently-used Components
            #cheat-chart-container
                .row
                    .col-lg-9
                        #cheat-chart
                    .col-lg-3
                        #cheat-detail

            h2 Series
            ul
                each names, key in charts
                    li.cheat-chart-item
                        a(href="option.html#series-#{key}", target="_blank")
                            img(src="#{cdnPayRoot}/#{ecWWWLang}/images/builder/chart/#{key}.svg?_v_=#{cdnPayVersion}", alt="")
                            <h5><div>#{names[1]}</div></h5>

            h2 Coordinates
            ul
                each names, key in coords
                    li.cheat-chart-item
                        - var url = key == 'gridSimple' ? 'grid' : key;
                        a(href="option.html##{url}", target="_blank")
                            img(src="#{cdnPayRoot}/#{ecWWWLang}/images/builder/component/#{key}.svg?_v_=#{cdnPayVersion}", alt="")
                            <h5><div>#{names[1]}</div></h5>

            h2 Components
            ul
                each names, key in components
                    li.cheat-chart-item
                        if key == 'markPoint' || key == 'markLine' || key == 'markArea'
                            - var url = 'series-line.' + key
                        else
                            - var url = key
                        a(href="option.html##{url}", target="_blank")
                            img(src="#{cdnPayRoot}/#{ecWWWLang}/images/builder/component/#{key}.svg?_v_=#{cdnPayVersion}", alt="")
                            <h5><div>#{names[1]}</div></h5>

        include ../components/footer

block extra_js
    script(type='text/javascript').
        document.getElementById('nav-resources').className = 'active';

    script(src="#{cdnThirdParty.echartsMinJS_4_8_0}")
    script(src="#{getAssetUrl(cdnPayRoot, ecWWWLang + '/js/cheat-sheet-en.js')}")