{% extends "base.html" %}\n{% load custom_template_tags %}\n{% load humanize %}\n\n{% block content %}\n\n <div class="pl-content uk-section uk-section-default uk-border-rounded uk-width-expand uk-padding-small">\n\n <div class="uk-flex uk-flex-middle" style="justify-content: space-between; align-items: center;">\n\n <!-- H1 with Icon -->\n <h1 class="uk-flex uk-flex-middle" style="margin: 0;">\n <span uk-icon="icon: crosshairs; ratio: 2" style="color: #FB950E;" class="uk-margin-small-right"></span>\n Model Picks\n </h1>\n\n <!-- Action Dropdown -->\n {% if results %}\n <div class="uk-inline">\n <button class="uk-button uk-button-default uk-button-small" uk-icon="icon: more-vertical; ratio:0.8"></button>\n <div uk-dropdown="mode: click; pos: bottom-right">\n <ul class="uk-nav uk-dropdown-nav">\n <li>\n <a\n href="#"\n class="export-btn"\n data-type="report"\n style="text-decoration: none; display: flex; align-items: center;">\n Export Content Report\n </a>\n </li>\n <li>\n <a\n href="#"\n class="export-btn"\n data-type="history"\n style="text-decoration: none; display: flex; align-items: center;">\n Export Ticker Performance\n </a>\n </li>\n </ul>\n </div>\n </div>\n {% endif %}\n\n </div>\n\n <div class="uk-background-muted">\n <ul class="uk-subnav uk-subnav-pill ">\n <li>\n\n <form class="uk-form" id="form_filter">\n <select name="model_id" id="model_id" class="uk-select uk-form-small uk-form-width-large">\n <option value="">All Models ...</option>\n {% for m in models %}\n <option value="{{ m.id }}" {% if m.id == model_id %} selected {% endif %}>\n {{ m.name }} ({{ m.key }})\n </option>\n {% endfor %}\n </select>\n\n <input type="text" name="keyword" value="{{ keyword }}" placeholder="Model Keyword..." class="uk-input uk-form-small uk-form-width-small"/>\n\n <input placeholder="Ticker" type="text" class="uk-input uk-form-small uk-form-width-small" name="ticker" id="ticker" value="{{ ticker }}" />\n\n <input placeholder="From Date" type="text" class="uk-input uk-form-small uk-form-width-small" name="date_from" id="date_from" value="{{ date_from }}" uk-datepicker="format:'YYYY-MM-DD'"/>\n <input placeholder="To Date" type="text" class="uk-input uk-form-small uk-form-width-small" name="date_to" id="date_to" value="{{ date_to }}" uk-datepicker="format:'YYYY-MM-DD'"/>\n\n <input type="submit" name="btn_run" value="Run" class="uk-button uk-button-primary uk-button-small"/>\n\n </form>\n\n </li>\n </ul>\n </div>\n\n <hr/>\n\n {% if results %}\n <table class="uk-table uk-table-divider uk-table-striped pl-picks" id="table_model_picks">\n <thead>\n <tr>\n <th nowrap>\n <span uk-tooltip="title: Pick Date">\n Pick Dt\n </span>\n </th>\n <th nowrap>\n <span uk-tooltip="title: Pick Date">\n Model\n </span>\n </th>\n <th nowrap>\n <span uk-tooltip="title: Tradeable Security">\n TICK\n </span>\n </th>\n <th nowrap>\n <span uk-tooltip="title: Probability Rank Score">\n PR\n </span>\n </th>\n <th nowrap>\n <span uk-tooltip="title: Action">\n Act\n </span>\n </th>\n <th nowraph>\n <span uk-tooltip="title: Tradeable Options?">\n O:\n </span>\n </th>\n <th nowrap>\n <span uk-tooltip="title: # Positive Items">\n <span class="positive_sentiment">\u2139\ufe0e<sup>\uff0b</sup></span>\n </span>\n </th>\n <th nowrap>\n <span uk-tooltip="title: # Positive Items">\n <span class="neutral_sentiment">\u2139\ufe0e<sup>\u3007</sup></span>\n </span>\n </th>\n <th nowrap>\n <span uk-tooltip="title: # Positive Items">\n <span class="negative_sentiment">\u2139\ufe0e<sup>\uff0d</sup></span>\n </span>\n </th>\n <th nowrap>\n <span uk-tooltip="title: Item Score (Positive-Negative-Neutral)">\n \u0394\u2139\ufe0e</span>\n </span>\n </th>\n <th nowrap>\n <span uk-tooltip="title: Avg. Sentiment">\n <span class="positive_sentiment">\uff0b</span>\n <span class="negative_sentiment">\uff0d</span>\n </span>\n </th>\n <th nowrap>\n <span uk-tooltip="title: Avg. Sentiment">\n \u0394%<sup>\uff0b</sup>\n </span>\n </th>\n <th nowrap>\n <span uk-tooltip="title: Avg. Sentiment">\n \u0394%<sup>\uff0d</sup>\n </span>\n </th>\n <th nowrap>\n <span uk-tooltip="title: (Prior Day) 2 Day RSI">\n RSI<sup>2</sup>\n </span>\n </th>\n <th nowrap>\n <span uk-tooltip="title: (Prior Day) 7 Day RSI">\n RSI<sup>7</sup>\n </span>\n </th>\n <th nowrap>\n <span uk-tooltip="title: (Prior Day) 2 Day VTR - Ratio of TR / 2D ATR">\n VTR<sup>2</sup>\n </span>\n </th>\n <th nowrap>\n <span uk-tooltip="title: (Prior Day) 7 Day VTR - Ratio of TR / 7D ATR">\n VTR<sup>7</sup>\n </span>\n </th>\n <th nowrap>\n <span uk-tooltip="title: (Prior Day) Trust Flow Score">\n TFS\n </span>\n </th>\n <th nowrap>\n <span uk-tooltip="title: (Prior Day) Citation Flow Score">\n CFS\n </span>\n </th>\n <th nowrap>\n <span uk-tooltip="title: (Prior Day) Total Volume">\n Vol (M)\n </span>\n </th>\n <th nowrap>\n <span uk-tooltip="title: (Prior Day) Opening Volume">\n OPG Vol\n </span>\n </th>\n <th nowrap>\n <span uk-tooltip="title: (Prior Day) Opening Price $">\n Open\n </span>\n </th>\n <th nowrap>\n <span uk-tooltip="title: (Prior Day) Closing Price $">\n Close\n </span>\n </th>\n </tr>\n </thead>\n <tbody>\n {% for r in results %}\n <tr>\n <td nowrap>\n {{ r.pick_date|date:"Y-m-d" }}\n </td>\n <td nowrap>\n <a href="{% url 'model_detail' id=r.model.id %}">{{ r.model.key }}</a>\n </td>\n <td nowrap>\n <a href="{% url "ticker_content" ticker=r.ticker %}?date_from={{ r.before_prior_date|date:"Y-m-d" }}&date_to={{ r.prior_date|date:"Y-m-d" }}">{{ r.ticker }}</a>\n </td>\n <td nowrap>\n {{ r.probability|floatformat:2|intcomma }}\n </td>\n <td nowrap>\n {{ r.action }}\n </td>\n <td nowrap>\n {% if r.put_count > 0 or r.call_count > 0 %}\n \u2705\n {% else %}\n <font color="#CCC">\u3007</font>\n {% endif %}\n </td>\n <td nowrap>\n {% if r.items_positive_count > 0 %}\n <span class="positive_sentiment">{{ r.items_positive_count }}</span>\n {% else %}\n 0\n {% endif %}\n </td>\n <td nowrap>\n {% if r.items_neutral_count > 0 %}\n <span class="neutral_sentiment">{{ r.items_neutral_count }}</span>\n {% else %}\n 0\n {% endif %}\n </td>\n <td nowrap>\n {% if r.items_negative_count > 0 %}\n <span class="negative_sentiment">\n {{ r.items_negative_count }}\n </span>\n {% else %}\n 0\n {% endif %}\n </td>\n <td nowrap>\n {% if r.items_score > 0 %}\n <span class="positive_sentiment" style="font-weight:bolder;">\n {{ r.items_score|floatformat:0 }}\n </span>\n {% elif r.items_score < 0 %}\n <span class="negative_sentiment" style="font-weight:normal;">\n {{ r.items_score|floatformat:0 }}\n </span>\n {% else %}\n <span class="neutral_sentiment" style="font-weight:normal;">\n {{ r.items_score|floatformat:0 }}\n </span>\n {% endif %}\n </td>\n <td nowrap>\n <span uk-tooltip="title: Sentiment: {{ r.sentiment_negative|floatformat:1 }} / {{ r.sentiment_neutral|floatformat:1 }} / {{ r.sentiment_positive|floatformat:1 }}">\n {% if r.sentiment_avg > 0 %}\n <span class="positive_sentiment" style="font-weight:bolder;">\n {{ r.sentiment_avg|floatformat:1 }}\n </span>\n {% elif r.sentiment_avg < 0 %}\n <span class="negative_sentiment" style="font-weight:normal;">\n {{ r.sentiment_avg|floatformat:1 }}\n </span>\n {% else %}\n <span class="neutral_sentiment" style="font-weight:normal;">\n {{ r.sentiment_avg|floatformat:1 }}\n </span>\n {% endif %}\n </span>\n </td>\n <td nowrap>\n <span class="positive_sentiment">\n {{ r.sentiment_positive_delta_1d_pct|floatformat:2 }}%\n </span>\n </td>\n <td nowrap>\n <span class="negative_sentiment" style="font-weight:normal;">\n {{ r.sentiment_negative_delta_1d_pct|floatformat:2 }}%\n </span>\n </td>\n <td nowrap>\n {% if r.rsi_2d <= 10 %}\n <span class="positive_sentiment" style="font-weight:bolder;">\n {{ r.rsi_2d|floatformat:0 }}\n </span>\n {% elif r.rsi_2d >= 90 %}\n <span class="negative_sentiment" style="font-weight:normal;">\n {{ r.rsi_2d|floatformat:0 }}\n </span>\n {% else %}\n <span class="neutral_sentiment" style="font-weight:normal;">\n {{ r.rsi_2d|floatformat:0 }}\n </span>\n {% endif %}\n </td>\n <td nowrap>\n {% if r.rsi_7d <= 10 %}\n <span class="positive_sentiment" style="font-weight:bolder;">\n {{ r.rsi_7d|floatformat:0 }}\n </span>\n {% elif r.rsi_7d >= 90 %}\n <span class="negative_sentiment" style="font-weight:normal;">\n {{ r.rsi_7d|floatformat:0 }}\n </span>\n {% else %}\n <span class="neutral_sentiment" style="font-weight:normal;">\n {{ r.rsi_7d|floatformat:0 }}\n </span>\n {% endif %}\n </td>\n <td nowrap uk-tooltip="title: TR: {{ r.true_range}}, 2D ATR: {{ r.atr_2d }}">\n {% if r.vtr_2d >= 1 %}\n <span class="positive_sentiment" style="font-weight:bolder;">\n {{ r.vtr_2d|floatformat:1 }}\n </span>\n {% elif r.vtr_2d == 1 %}\n <span class="negative_sentiment" style="font-weight:normal;">\n {{ r.vtr_2d|floatformat:1 }}\n </span>\n {% else %}\n <span class="neutral_sentiment" style="font-weight:normal;">\n {{ r.vtr_2d|floatformat:1 }}\n </span>\n {% endif %}\n </td>\n <td nowrap uk-tooltip="title: TR: {{ r.true_range}}, 7D ATR: {{ r.atr_7d }}">\n {% if r.vtr_7d >= 1 %}\n <span class="positive_sentiment" style="font-weight:bolder;">\n {{ r.vtr_7d|floatformat:1 }}\n </span>\n {% elif r.vtr_7d == 1 %}\n <span class="negative_sentiment" style="font-weight:normal;">\n {{ r.vtr_7d|floatformat:1 }}\n </span>\n {% else %}\n <span class="neutral_sentiment" style="font-weight:normal;">\n {{ r.vtr_7d|floatformat:1 }}\n </span>\n {% endif %}\n </td>\n <td nowrap>{{ r.trust_flow_avg|floatformat:0|intcomma }}</td>\n <td nowrap>{{ r.citation_flow_avg|floatformat:0|intcomma }}</td>\n <td nowrap>\n <span uk-tooltip="title: Volume: {{ r.volume_exact|intcomma }}">\n {% if r.volume < 0.25 %}\n <span class="negative_sentiment" style="font-weight:normal;">\n {{ r.volume|floatformat:2|intcomma|zpad:5 }}\n </span>\n {% else %}\n {{ r.volume|floatformat:2|intcomma|zpad:5 }}\n {% endif %}\n </span>\n </td>\n <td nowrap>{{ r.volume_open|floatformat:0|intcomma }}</td>\n <td nowrap>$ {{ r.price_open|floatformat:2 }}</td>\n <td nowrap>$ {{ r.price_close|floatformat:2 }}</td>\n </tr>\n {% endfor %}\n </tbody>\n </table>\n\n {% else %}\n\n <table class="uk-table uk-table-divider uk-table-striped">\n <tr>\n <td >\n <i>No picks found. Adjust the filter above...</i>\n </td>\n </tr>\n </table>\n {% endif %}\n\n\n </div>\n\n{% endblock %}\n\n{% block additional_head %}\n\n<style>\n /* make header titles act as the filter trigger; hide DT chevrons & the plugin button */\n th, td { text-align: left !important; font-size:12px !important; }\n th .dt-column-header .dt-column-order { display: none; }\n\n /* pointer cursor so it feels clickable */\n #table_model_picks thead th { cursor: pointer; }\n\n /* compact, consistent column layout */\n th.col-mini, td.col-mini {\n min-width: 72px;\n text-align: left;\n white-space: nowrap;\n }\n\n /* optional: keep your header layout tidy when DT injects controls */\n th .col-mini { display: flex; align-items: left; gap: .25rem; }\n th .col-mini.dt-column-title { flex: 1 1 auto; text-align: left;}\n th .col-mini .dtcc { margin-left: auto; display: inline-flex; }\n\n /* optional: shrink icon-only buttons if you ever show them again */\n th .dtcc .dtcc-button-text { display: none; }\n th .dtcc .dtcc-button { padding: .15rem; }\n\n /* if active */\n th.dtcc-active {\n color: black !important;\n text-decoration: underline;\n }\n</style>\n\n{% endblock %}\n\n{% block body_end %}\n\n <!-- 1) jQuery FIRST -->\n <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>\n\n <!-- flatpickr CSS -->\n <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">\n\n <!-- flatpickr JS -->\n <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>\n\n <script>\n flatpickr("#date_from", {\n dateFormat: "Y-m-d",\n });\n flatpickr("#date_to", {\n dateFormat: "Y-m-d",\n });\n </script>\n\n <!-- Export Form Post -->\n <script>\n $(document).ready(function() {\n $(".export-btn").on("click", function(e) {\n e.preventDefault();\n\n // Get form values\n let model_id = $("#model_id").val();\n let ticker = $("#ticker").val();\n let date_from = $("#date_from").val();\n let date_to = $("#date_to").val();\n let type = $(this).data("type");\n\n // Construct URL\n let exportUrl = `{% url 'export_model_picks' %}`\n + `?type=` + type + `&model_id=${model_id}&ticker=${ticker}&date_from=${date_from}&date_to=${date_to}`;\n\n // Open in new tab\n window.open(exportUrl, "_blank");\n });\n });\n </script>\n\n <!-- DataTables 2.x core -->\n <link rel="stylesheet" href="https://cdn.datatables.net/2.3.2/css/dataTables.dataTables.min.css">\n <script src="https://cdn.datatables.net/2.3.2/js/dataTables.min.js"></script>\n\n <!-- ColumnControl -->\n <link rel="stylesheet" href="https://cdn.datatables.net/columncontrol/1.0.7/css/columnControl.dataTables.min.css">\n <script src="https://cdn.datatables.net/columncontrol/1.0.7/js/dataTables.columnControl.min.js"></script>\n\n <script>\n\n let dt;\n\n document.addEventListener('DOMContentLoaded', function () {\n\n // destroy legacy jQuery DT if present\n if ($.fn.dataTable && $.fn.dataTable.isDataTable('#table_model_picks')) {\n $('#table_model_picks').DataTable().destroy();\n }\n\n const tableEl = document.querySelector('#table_model_picks');\n const thead = tableEl.querySelector('thead');\n\n dt = new DataTable('#table_model_picks', {\n serverSide: false,\n searching: true,\n deferRender: true,\n paging: true,\n pageLength: 100,\n lengthChange: false,\n lengthMenu: [50, 100, 250, 1000],\n info: true,\n\n // rank at index 4 after adding "Report Dt"\n order: [[4, 'desc']],\n ordering: { handler: false, indicators: false },\n orderMulti: true,\n\n columnControl: {\n target: 0,\n content: [['orderAsc', 'orderDesc', 'search', 'searchClear']]\n },\n\n autoWidth: false\n });\n\n // Make header title open ColumnControl dropdown (saves space)\n thead.addEventListener('click', function (e) {\n const th = e.target.closest('th');\n if (!th) return;\n if (e.target.closest('.dtcc')) return; // ignore clicks on injected control UI\n const trigger = th.querySelector('.dtcc .dtcc-button, .dtcc .dtcc-trigger');\n if (trigger) {\n trigger.click();\n e.preventDefault();\n e.stopPropagation();\n }\n });\n\n function updateActiveStates() {\n // clear all\n thead.querySelectorAll('th.dtcc-active').forEach(th => th.classList.remove('dtcc-active'));\n\n // mark ordered columns\n const orderedIdx = dt.order().map(([idx]) => idx);\n orderedIdx.forEach(idx => {\n const th = dt.column(idx).header();\n if (th) th.classList.add('dtcc-active');\n });\n\n // mark columns that have ANY search (legacy or fixed/named)\n dt.columns().every(function () {\n let hasSearch = false;\n\n // 1) legacy per-column search (if you ever set it directly)\n const legacy = this.search();\n if ((typeof legacy === 'string' && legacy.trim() !== '') ||\n (legacy && typeof legacy === 'object' && String(legacy.value || '').trim() !== '')) {\n hasSearch = true;\n }\n\n // 2) ColumnControl / named fixed searches (DataTables v2)\n if (!hasSearch) {\n const names = this.search.fixed().toArray ? this.search.fixed().toArray() : [];\n for (const name of names) {\n const term = this.search.fixed(name);\n if (\n (typeof term === 'string' && term.trim() !== '') ||\n term instanceof RegExp ||\n typeof term === 'function' ||\n (term && typeof term === 'object' && String(term.value || '').trim() !== '')\n ) {\n hasSearch = true;\n break;\n }\n }\n }\n\n if (hasSearch) {\n const th = this.header();\n if (th) th.classList.add('dtcc-active');\n }\n });\n }\n\n // Recompute whenever order/search/draw happens (ColumnControl sets column().search())\n dt.on('init.dt order.dt search.dt draw.dt', updateActiveStates);\n\n // initial paint\n updateActiveStates();\n });\n\n </script>\n\n{% endblock %}\n