<?xml version="1.0" encoding="utf-8"?>
<odoo>
        <template id="graphs" name="Link Statistics">
            <t t-call="website.layout">
                <div class="o_website_links_chart">
                    <div class="container">
                        <div class="mt8">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="/r">Link Tracker</a></li>
                                <li class="breadcrumb-item active truncate_text"><t t-out="title"/></li>
                            </ol>
                        </div>

                        <input type="hidden" id="code" t-att-value="code" />
                        <input type="hidden" id="link_id" t-att-value="id" />

                        <h1 class="o_page_header mt0 text-truncate"><t t-out="title"/></h1>

                        <div class="row">
                            <div class="col-md-2">
                                <p><strong>Original URL</strong></p>
                            </div>
                            <div class="col-md-10">
                                <p class="truncate_text mw-100" t-att-title="url"><a t-att-href="url"><t t-out="url"/></a></p>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-2">
                                <p><strong>Tracked Link</strong></p>
                            </div>
                            <div class="col-md-10">
                                <p>
                                    <span class="o_website_links_short_url" id="short_url"><span id="short-url-host"><t t-out="short_url_host"/></span><span id="o_website_links_code"><t t-out="code"/></span></span>
                                    <span class="o_website_links_edit_tools">
                                        <a role="button" class="o_website_links_ok_edit btn btn-sm btn-primary o_translate_inline" href="#">ok</a> or
                                        <a class="o_website_links_cancel_edit o_translate_inline" href="#">cancel</a>
                                    </span>
                                    <a t-attf-class="#{'' if can_create_link_tracker_code else 'd-none'} o_website_links_edit_code o_translate_inline" aria-label="Edit code" title="Edit code"><span class="fa fa-pencil gray"></span></a>
                                    <a class="copy-to-clipboard btn btn-sm btn-primary o_translate_inline" t-att-data-clipboard-text="short_url"><i class="fa fa-copy me-2"/>Copy</a>
                                </p>
                                <p class='o_website_links_code_error' style='color:red;font-weight:bold'></p>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-2">
                                <p><strong>Redirected URL</strong></p>
                            </div>
                            <div class="col-md-10 d-flex flex-nowrap align-items-start gap-1">
                                <p class="truncate_text" t-att-title="redirected_url">
                                    <t t-out="redirected_url"/>
                                </p>
                                <a class="copy-to-clipboard btn btn-sm btn-primary" t-att-data-clipboard-text="redirected_url"><i class="fa fa-copy me-2"/>Copy</a>
                            </div>
                        </div>
                        <div t-if="campaign_id" class="row">
                            <div class="col-md-2">
                                <p><strong>Campaign</strong></p>
                            </div>
                            <div class="col-md-10">
                                <p><t t-out="campaign_id[1]"/></p>
                            </div>
                        </div>
                        <div t-if="medium_id" class="row">
                            <div class="col-md-2">
                                <p><strong>Medium</strong></p>
                            </div>
                            <div class="col-md-10">
                                <p><t t-out="medium_id[1]"/></p>
                            </div>
                        </div>
                        <div t-if="source_id" class="row">
                            <div class="col-md-2">
                                <p><strong>Source</strong></p>
                            </div>
                            <div class="col-md-10">
                                <p><t t-out="source_id[1]"/></p>
                            </div>
                        </div>
                        <div t-if="label" class="row" >
                            <div class="col-md-2">
                                <p><strong>Name</strong></p>
                            </div>
                            <div class="col-md-10">
                                <p t-out="label"/>
                            </div>
                        </div>

                        <h1 class="o_page_header">Statistics
                            <small class="float-end d-none d-md-block mt16" id="filters">
                                <ul class="nav nav-tabs nav-tabs-inline graph-tabs" role="tablist">
                                    <li class="nav-item"><a aria-controls="all_time_charts" href="#all_time_charts" class="nav-link active" role="tab" data-bs-toggle="tab">All Time</a></li>
                                    <li class="nav-item"><a aria-controls="last_month_charts" href="#last_month_charts" class="nav-link" role="tab" data-bs-toggle="tab">Last Month</a></li>
                                    <li class="nav-item"><a aria-controls="last_week_charts" href="#last_week_charts" class="nav-link" role="tab" data-bs-toggle="tab">Last Week</a></li>
                                </ul>
                            </small>
                        </h1>

                        <div class="mb128">
                            <div class="tab-content">
                                <div class="website_links_charts_error d-none"></div>
                                <!-- All Time Charts -->
                                <div role="tabpanel" class="tab-pane active" id="all_time_charts">
                                    <div class="website_links_click_chart mt32" id="all_time_clicks_chart">
                                        <h3 class="title"></h3>
                                        <canvas style="height:10em;"></canvas>
                                    </div>
                                    <div class="website_links_click_chart mt32" id="all_time_countries_charts">
                                        <h3 class="title"></h3>
                                        <canvas style="height:10em;"></canvas>
                                    </div>
                                </div>

                                <!-- Last Month Charts -->
                                <div role="tabpanel" class="tab-pane" id="last_month_charts">
                                    <div class="website_links_click_chart mt32" id="last_month_clicks_chart">
                                        <h3 class="title"></h3>
                                        <canvas style="height:10em;"></canvas>
                                    </div>
                                    <div class="website_links_click_chart mt32" id="last_month_countries_charts">
                                        <h3 class="title"></h3>
                                        <canvas style="height:10em;"></canvas>
                                    </div>
                                </div>

                                <!-- Last Week Charts -->
                                <div role="tabpanel" class="tab-pane" id="last_week_charts">
                                    <div class="website_links_click_chart mt32" id="last_week_clicks_chart">
                                        <h3 class="title"></h3>
                                        <canvas style="height:10em;"></canvas>
                                    </div>
                                    <div class="website_links_click_chart mt32" id="last_week_countries_charts">
                                        <h3 class="title"></h3>
                                        <canvas style="height:10em;"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </t>
        </template>
</odoo>
