{% extends "layout-distributors.html.twig" %}
{% block title %}Distribution links - NIS{% endblock %}
{% block stylesheets %}
{{ parent() }}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@300&family=Montserrat:wght@100&display=swap" rel="stylesheet">
{{encore_entry_link_tags('distLinksCSS')}}
{% endblock %}
{% block body %}
{{ include("distributors/nav_menu.twig",{option:'dist_links'}) }}
<main id="main">
    <div class="container container-all row">
        <div class="col-12 content-title">
            <span>My distribution links:</span>
        </div>
        <div class="col-12 content-subtitle">
            <span>
                Select a product to load the link in the field below, you can manually copy by selecting the text or save it to your clipboard clicking the right icon "<i class="fa fa-clone" aria-hidden="true"></i>"<br>
                Or if you prefer, you can navigate to the website by clicking the "Show Website" button
            </span>
            <div class="line-blue"></div>
        </div>
        <div class="content-products"></div>
        <div class="col-12 container-links">
            <div class="content-link-el">
                <button @click="goToLink"><i class="fa fa-globe left" aria-hidden="true"></i>Show Website</button>
                <input type="text" class="browser-default" id="content_url">
                <i class="fa fa-clone" aria-hidden="true" @click="copyUrl()" style="cursor: pointer;"></i>
                <span class="mini-alert green" id="miniAlertGreen">Copied..!</span>
                <span class="mini-alert blue" id="miniAlertBlueOpen">Redirecting to Website..!</span>
                <span class="mini-alert blue" id="miniAlertBlue">Link Loaded..!</span>
            </div>
        </div>
    </div>
</main>
<input type="hidden" id="dist_slug" value={{slug}}>
<input type="hidden" id="distProducts" value='{{products}}'>
<input type="hidden" id="nimRoute" value={{route}}>
{% endblock %}
{% block javascripts %}
{# <script src="{{ app.asset_path }}/assets/js/main.js"></script> #}
    {% if app.environment == 'prod' %}    
	<script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.min.js"></script>
	{% else %}
	<script type="text/javascript" src="https://unpkg.com/vue@2.3.4/dist/vue.js"></script>
	{% endif %}
    <script src="{{asset('js/distributors/dist_links.js')}}"></script>
{% endblock %}