{% extends "layouts/dashboard.twig" %}

{% block title %}{{ __("affiliates.banner_code") }}{% endblock %}

{% block content %}
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">{{ __("affiliates.banner_code_for") }} "{{ banner.name }}"</h3>
            <div class="card-tools">
                <a href="/affiliates/banners" class="btn btn-sm btn-secondary">
                    <i class="fas fa-arrow-left"></i> {{ __("affiliates.back_to_banners") }}
                </a>
            </div>
        </div>
        <div class="card-body">
            <div class="form-group">
                <label for="bannerCode">{{ __("affiliates.html_code") }}</label>
                <textarea id="bannerCode" class="form-control" rows="10" readonly>
                    {%- set trackingUrl = base_url ~ '/affiliates/track/' ~ affiliate.affiliate_code ~ '/' ~ banner.id -%}
                    {%- set imageUrl = banner.image_url -%}
                    {%- set targetUrl = banner.target_url -%}
                    {%- set bannerWidth = banner.width -%}
                    {%- set bannerHeight = banner.height -%}
                    &lt;a href="{{ trackingUrl }}" target="_blank"&gt;
                        &lt;img src="{{ imageUrl }}" alt="{{ banner.name }}" width="{{ bannerWidth }}" height="{{ bannerHeight }}" /&gt;
                    &lt;/a&gt;
                </textarea>
            </div>
            <div class="form-group">
                <label for="previewBanner">{{ __("affiliates.banner_preview") }}</label>
                <div id="previewBanner" style="border: 1px solid #ccc; padding: 10px; display: inline-block;">
                    <a href="{{ base_url ~ '/affiliates/track/' ~ affiliate.affiliate_code ~ '/' ~ banner.id }}" target="_blank">
                        <img src="{{ banner.image_url }}" alt="{{ banner.name }}" width="{{ banner.width }}" height="{{ banner.height }}" />
                    </a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}