<?xml version="1.0"?>
<t name="Link Statistics" t-name="website_links.graphs">
            <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-esc="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-esc="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-esc="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-esc="short_url_host"/></span><span id="o_website_links_code"><t t-esc="code"/></span></span>
                                    <span class="o_website_links_edit_tools" style="display:none;">
                                        <a role="button" class="o_website_links_ok_edit btn btn-sm btn-primary" href="#">ok</a> or 
                                        <a class="o_website_links_cancel_edit" href="#">cancel</a>
                                    </span>
                                    <a t-attf-class="#{'' if can_create_link_tracker_code else 'd-none'} o_website_links_edit_code" aria-label="Edit code" title="Edit code"><span class="fa fa-pencil gray"/></a>
                                    <a class="copy-to-clipboard btn btn-sm btn-primary" 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;display:none"/>
                            </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-esc="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-esc="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-esc="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-esc="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">
                                <!-- 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"/>
                                        <canvas style="height:10em;"/>
                                    </div>
                                    <div class="website_links_click_chart mt32" id="all_time_countries_charts">
                                        <h3 class="title"/>
                                        <canvas style="height:10em;"/>
                                    </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"/>
                                        <canvas style="height:10em;"/>
                                    </div>
                                    <div class="website_links_click_chart mt32" id="last_month_countries_charts">
                                        <h3 class="title"/>
                                        <canvas style="height:10em;"/>
                                    </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"/>
                                        <canvas style="height:10em;"/>
                                    </div>
                                    <div class="website_links_click_chart mt32" id="last_week_countries_charts">
                                        <h3 class="title"/>
                                        <canvas style="height:10em;"/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </t>
        </t>
