{% extends "order_base.html" %} {% block style %}
<style>
    [v-cloak] {
        display: none;
    }

    .table.container {
        /* border: 1px solid #e4e3ea; */
        border-bottom: 1px solid #e4e3ea;
    }

    .table.row {
        width: 100%;
        height: 43px;
        border: 1px solid #e4e3ea;
        border-bottom: none;
        border-top: none;
        display: flex;
    }

    .table.header.row {
        height: auto;
        font-size: 14px;
        color: #757575;
        border: none;
        padding-bottom: 12px;
        /* font-weight: bold; */
    }

    .table_content .row:nth-child(2n + 1) {
        background: #F7F8FA;
    }

    .table_content .row:first-child {
        border-top: 1px solid #e4e3ea;
    }

    .cell {
        display: inline-block;
        width: 130px;
        padding: 0 20px;
        display: flex;
        align-items: center;
        word-break: break-all;
    }

    .cell.name {
        width: 40%;
        /* font-weight: 500; */
    }

    /* .header.cell.name {
        font-weight: normal;
    } */

    .cell.platform {
        width: 60%;
    }

    .platform_path {
        width: 33%;
        display: inline-block;
        padding-right: 116px;
        position: relative;
        padding-left: 24px;
        color: var(--opration-color);
        cursor: pointer;
        font-weight: 500;
    }

    .platform_path:before {
        width: 16px;
        height: 16px;
        content: '';
        position: absolute;
        left: 0;
        background-image: url('/download/download_icon.png');
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    .platform_path:hover {
        color: #A84CDD;
        text-decoration: underline;
    }

    .platform_path:hover:before {
        background-image: url('/download/download_icon_hover.png');
    }

    .platform_path .popover {
        /* min-width: 280px; */
        position: absolute;
        top: 16px;
        left: 26px;
        padding: 9px 20px 9px 20px;
        background: #fff;
        box-shadow: 0px 2px 10px 0px rgba(105, 105, 105, 0.18);
        border-radius: 4px 4px 4px 0px;
        border: 1px solid rgba(222, 220, 231, 1);
        z-index: 1;
        display: none;
    }

    .platform_path .popover a {
        color: #444444;
        font-size: 14px;
        line-height: 32px;
        display: block;
        color: var(--opration-color);
        text-decoration: underline;
    }

    .platform_path .popover a:hover {
        color: #a84bdd;
    }

    .platform_path:hover .popover {
        display: block;
    }
</style>
{% endblock %} {% block position_bar %}
<div><img src="/my_pad/download_page.png" />{{ _('Download') }}</div>
{% endblock %} {% block header %} {% endblock %} {% block contents %}
<div id="download_page">
    <div class="content_wrapper">
        <div class="table container">
            <div class="table header row">
                <div class="table header cell name">{{ _('Product') }}</div>
                <div class="table header cell platform">{{ _('Platform Download') }}</div>
            </div>

            <div class="table_content">
                <template v-cloak v-for="(product, index) in dataSource">
                    <div class="table row">
                        <div class="table cell name">
                            <span>{[product.product_name ]} {[product.version_name]} {[product.bus_width ? '(' +
                                product.bus_width + 'bits)' : '']}</span>
                        </div>
                        <div class="table cell platform">
                            <template v-for="path in product.paths">
                                <div class="platform_path" v-if="path[1] && path[1] instanceof Array">
                                    <div>
                                        <span>{[getDownloadNameFn(path[0])]}</span>
                                        <div class="popover">
                                            <template v-for="link in path[1]">
                                                <a :href="link[1]">{[link[0]]}</a>
                                            </template>
                                        </div>
                                    </div>

                                </div>
                                <a class="platform_path" v-else :href="path[1]">
                                    <span>{[getDownloadNameFn(path[0])]}</span>
                                </a>
                            </template>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</div>

{% endblock %} {% block script %}
<script type="text/JavaScript">
  var info = new Vue({
    delimiters: ['{[', ']}'],
    el: '#download_page',
    data: {
      dataSource: [],
      currentVersion: ''
    },
    mounted() {
      this.loadData();
    },
    methods: {
      loadData: function() {
        var _this = this
        $.ajax({
          type: 'get',
          url: '/downloads',
          data: {},
          contentType: 'application/json;charset=utf-8',
          dataType: 'json',
          success: function(res) {
            _this.dataSource = res;
          }
        })
      },
      getDownloadNameFn: function(name) {
        if (!name) {
            return 'All';
        } else if (name.toLowerCase().indexOf('win') > -1) {
          return 'Windows';
        } else if (name.toLowerCase().indexOf('linux') > -1) {
          return 'Linux';
        }
        else if (name.toLowerCase().indexOf('mac') > -1) {
          return 'MacOS';
        }
        return name;
      },
    }
  })
</script>
{% endblock %}