Let us split the template to have buy_signals template seperate from sell_signals and sideways. Remember to write a script that is compatible with django. Also, you need to still put javascript code to update signals every 5 seconds. Also, in the Buy signals page, remember to include three tabs as we discussed earlier, for Very Bullish, Bullish and Less Bullish Signals and upon opening the page the default should be Bullish signals. The same for Sell Signals. Also, remember to include all the analysis results upon clicking on a symbol. 
Change below template and send me complete code for each and also make changes to solve the errors that I shared earlier

signal_list.html
<!-- templates/signal_list.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Trading Signals</title>
    <style>
        body {
            background-color: #121212;
            color: #FFFFFF;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        h1 {
            text-align: center;
            padding: 20px 0;
        }
        .nav-links {
            text-align: center;
            margin-bottom: 20px;
        }
        .nav-links a {
            margin: 0 10px;
            color: #FFFFFF;
            text-decoration: none;
            background-color: #1E88E5;
            padding: 10px 15px;
            border-radius: 5px;
        }
        .nav-links a:hover {
            background-color: #1565C0;
        }
        .filter-form {
            width: 80%;
            margin: auto;
            margin-bottom: 20px;
            padding: 10px;
            background-color: #1E1E1E;
            border-radius: 5px;
        }
        .filter-form div {
            margin-bottom: 10px;
        }
        .filter-form label {
            margin-right: 5px;
        }
        .filter-form input, .filter-form select, .filter-form button {
            margin-right: 15px;
            padding: 5px;
        }
        table {
            width: 80%;
            margin: auto;
            border-collapse: collapse;
            background-color: #1E1E1E;
            color: #FFFFFF;
        }
        th, td {
            border: 1px solid #333333;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: #212121;
            cursor: pointer;
        }
        tr:nth-child(even) {
            background-color: #2C2C2C;
        }
        tr:hover {
            background-color: #333333;
        }
        .expanded-row {
            display: none;
        }
        .chart-link {
            color: #64B5F6;
            text-decoration: none;
        }
        .chart-link:hover {
            text-decoration: underline;
        }
        .pagination {
            width: 80%;
            margin: auto;
            margin-top: 20px;
            text-align: center;
        }
        .pagination a, .pagination span {
            color: #FFFFFF;
            padding: 8px 16px;
            text-decoration: none;
            border: 1px solid #333333;
            margin: 0 2px;
        }
        .pagination a:hover {
            background-color: #4CAF50;
            border-color: #4CAF50;
        }
        .active-page {
            background-color: #4CAF50;
            border-color: #4CAF50;
        }
    </style>
</head>
<body>
    <h1>Trading Signals</h1>

    <div class="nav-links">
        <a href="{% url 'home' %}">Home</a>
        <a href="{% url 'signal_list' %}?signal_type=VERY_BULLISH">Bullish Signals</a>
        <a href="{% url 'signal_list' %}?signal_type=VERY_BEARISH">Bearish Signals</a>
        <a href="{% url 'signal_list' %}?signal_type=SIDEWAYS">Sideways Signals</a>
    </div>

    <!-- Filter Form -->
    <form method="get" class="filter-form">
        <div>
            <label for="symbol">Symbol:</label>
            <input type="text" id="symbol" name="symbol" value="{{ symbol_filter }}">
            <label for="timeframe">Timeframe:</label>
            <select id="timeframe" name="timeframe">
                <option value="">All</option>
                {% for tf in ['5m', '15m', '1h'] %}
                    <option value="{{ tf }}" {% if timeframe_filter == tf %}selected{% endif %}>{{ tf }}</option>
                {% endfor %}
            </select>
            <label for="signal_type">Signal Type:</label>
            <select id="signal_type" name="signal_type">
                <option value="">All</option>
                {% for stype in ['VERY_BULLISH', 'BULLISH', 'LESS_BULLISH', 'VERY_BEARISH', 'BEARISH', 'LESS_BEARISH', 'SIDEWAYS', 'NO_SIGNAL'] %}
                    <option value="{{ stype }}" {% if signal_type_filter == stype %}selected{% endif %}>{{ stype }}</option>
                {% endfor %}
            </select>
        </div>
        <div>
            <label for="date_from">Date From:</label>
            <input type="date" id="date_from" name="date_from" value="{{ date_from }}">
            <label for="date_to">Date To:</label>
            <input type="date" id="date_to" name="date_to" value="{{ date_to }}">
            <label for="price_change_min">24h Price Change Min:</label>
            <input type="number" step="any" id="price_change_min" name="price_change_min" value="{{ price_change_min }}">
            <label for="price_change_max">24h Price Change Max:</label>
            <input type="number" step="any" id="price_change_max" name="price_change_max" value="{{ price_change_max }}">
            <button type="submit">Filter</button>
        </div>
    </form>

    <table id="signals-table">
        <thead>
            <tr>
                <th data-sort="id">#</th>
                <th data-sort="run_date">Run Date</th>
                <th data-sort="timestamp">Timestamp</th>
                <th data-sort="symbol">Symbol</th>
                <th data-sort="timeframe">Timeframe</th>
                <th data-sort="price">Price</th>
                <th data-sort="price_change_24h">24h Change</th>
                <th data-sort="signal_type">Signal Type</th>
                <th data-sort="stop_loss">Stop Loss</th>
                <th data-sort="take_profit">Take Profit</th>
                <th>Chart</th>
            </tr>
        </thead>
        <tbody>
            {% for signal in signals %}
                <tr class="signal-row" data-id="{{ signal.id }}">
                    <td>{{ forloop.counter }}</td>
                    <td>{{ signal.run_date|date:"Y-m-d H:i:s" }}</td>
                    <td>{{ signal.timestamp|date:"Y-m-d H:i:s" }}</td>
                    <td>{{ signal.symbol }}</td>
                    <td>{{ signal.timeframe }}</td>
                    <td>{{ signal.price }}</td>
                    <td>{{ signal.price_change_24h|default:"N/A" }}</td>
                    <td>{{ signal.signal_type }}</td>
                    <td>{{ signal.stop_loss|default:"-" }}</td>
                    <td>{{ signal.take_profit|default:"-" }}</td>
                    <td><a href="{% url 'home' %}?symbol={{ signal.symbol }}" class="chart-link">View Chart</a></td>
                </tr>
                <tr class="expanded-row" id="details-{{ signal.id }}">
                    <td colspan="11">
                        <!-- Expanded content goes here -->
                        <div>
                            <strong>Risk-Reward Ratio:</strong> {{ signal.risk_reward_ratio|default:"-" }}<br>
                            <strong>Market Regime:</strong> {{ signal.market_regime|default:"-" }}<br>
                            <strong>Support:</strong> {{ signal.additional_info.support|default:"-" }}<br>
                            <strong>Resistance:</strong> {{ signal.additional_info.resistance|default:"-" }}<br>
                            <strong>Other Timeframe Signals:</strong>
                            <ul>
                                {% for tf, s_type in signal.additional_info.other_timeframe_signals.items %}
                                    <li>{{ tf }}: {{ s_type }}</li>
                                {% endfor %}
                            </ul>
                            <strong>Analysis Results:</strong>
                            <ul>
                                {% for analysis_name, analysis_result in signal.additional_info.analysis_results.items %}
                                    <li>{{ analysis_name }}: {{ analysis_result.Signal }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                    </td>
                </tr>
            {% empty %}
                <tr>
                    <td colspan="11">No Signals Available</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>

    <!-- Pagination Controls -->
    {% if signals.has_other_pages %}
        <div class="pagination">
            {% if signals.has_previous %}
                <a href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value|urlencode }}&{% endif %}{% endfor %}page={{ signals.previous_page_number }}">Previous</a>
            {% endif %}
            {% for num in signals.paginator.page_range %}
                {% if signals.number == num %}
                    <span class="active-page">{{ num }}</span>
                {% else %}
                    <a href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value|urlencode }}&{% endif %}{% endfor %}page={{ num }}">{{ num }}</a>
                {% endif %}
            {% endfor %}
            {% if signals.has_next %}
                <a href="?{% for key, value in request.GET.items %}{% if key != 'page' %}{{ key }}={{ value|urlencode }}&{% endif %}{% endfor %}page={{ signals.next_page_number }}">Next</a>
            {% endif %}
        </div>
    {% endif %}

    <script>
        // Expand/Collapse signal details
        document.addEventListener('DOMContentLoaded', function() {
            const signalRows = document.querySelectorAll('.signal-row');
            signalRows.forEach(row => {
                row.addEventListener('click', function() {
                    const signalId = this.getAttribute('data-id');
                    const detailsRow = document.getElementById('details-' + signalId);
                    if (detailsRow.style.display === 'table-row') {
                        detailsRow.style.display = 'none';
                    } else {
                        detailsRow.style.display = 'table-row';
                    }
                });
            });

            // Sorting functionality
            const headers = document.querySelectorAll('th[data-sort]');
            headers.forEach(header => {
                header.addEventListener('click', function() {
                    const sortBy = this.getAttribute('data-sort');
                    let sortOrder = 'asc';
                    if (this.classList.contains('asc')) {
                        sortOrder = 'desc';
                    }
                    // Update the URL with sort parameters
                    const urlParams = new URLSearchParams(window.location.search);
                    urlParams.set('sort_by', sortBy);
                    urlParams.set('sort_order', sortOrder);
                    window.location.search = urlParams.toString();
                });
            });

            // Auto-refresh every 5 seconds
            setInterval(() => {
                fetchSignals();
            }, 5000);

            function fetchSignals() {
                fetch('{% url "fetch_signals_ajax" %}?{% for key, value in request.GET.items %}{{ key }}={{ value|urlencode }}&{% endfor %}')
                .then(response => response.json())
                .then(data => {
                    updateTable(data.signals);
                })
                .catch(error => console.error('Error fetching signals:', error));
            }

            function updateTable(signalsData) {
                const tbody = document.querySelector('#signals-table tbody');
                tbody.innerHTML = '';
                signalsData.forEach((signal, index) => {
                    const row = document.createElement('tr');
                    row.className = 'signal-row';
                    row.setAttribute('data-id', signal.id);
                    row.innerHTML = `
                        <td>${index + 1}</td>
                        <td>${signal.run_date}</td>
                        <td>${signal.timestamp}</td>
                        <td>${signal.symbol}</td>
                        <td>${signal.timeframe}</td>
                        <td>${signal.price}</td>
                        <td>${signal.price_change_24h || 'N/A'}</td>
                        <td>${signal.signal_type}</td>
                        <td>${signal.stop_loss || '-'}</td>
                        <td>${signal.take_profit || '-'}</td>
                        <td><a href="?symbol=${signal.symbol}" class="chart-link">View Chart</a></td>
                    `;
                    const detailsRow = document.createElement('tr');
                    detailsRow.className = 'expanded-row';
                    detailsRow.id = 'details-' + signal.id;
                    detailsRow.innerHTML = `
                        <td colspan="11">
                            <div>
                                <strong>Risk-Reward Ratio:</strong> ${signal.risk_reward_ratio || '-'}<br>
                                <strong>Market Regime:</strong> ${signal.market_regime || '-'}<br>
                                <strong>Support:</strong> ${signal.support || '-'}<br>
                                <strong>Resistance:</strong> ${signal.resistance || '-'}<br>
                                <strong>Other Timeframe Signals:</strong>
                                <ul>
                                    ${Object.entries(signal.other_timeframe_signals || {}).map(([tf, s_type]) => `<li>${tf}: ${s_type}</li>`).join('')}
                                </ul>
                                <strong>Analysis Results:</strong>
                                <ul>
                                    ${Object.entries(signal.analysis_results || {}).map(([analysis_name, analysis_result]) => `<li>${analysis_name}: ${analysis_result.Signal}</li>`).join('')}
                                </ul>
                            </div>
                        </td>
                    `;
                    tbody.appendChild(row);
                    tbody.appendChild(detailsRow);

                    // Re-attach the event listener
                    row.addEventListener('click', function() {
                        const signalId = this.getAttribute('data-id');
                        const detailsRow = document.getElementById('details-' + signalId);
                        if (detailsRow.style.display === 'table-row') {
                            detailsRow.style.display = 'none';
                        } else {
                            detailsRow.style.display = 'table-row';
                        }
                    });
                });
            }
        });
    </script>
</body>
</html>

<!-- templates/buy_signals.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Buy Signals</title>
    <style>
        body {
            background-color: black;
            color: white;
        }
        .back-button {
            margin: 20px;
        }
        .back-button a {
            background-color: blue;
            color: white;
            padding: 10px;
            text-decoration: none;
            border-radius: 5px;
        }
        .tab {
            overflow: hidden;
            background-color: black;
            color: white;
            display: flex;
            justify-content: center;
            margin: 20px auto;
            width: 80%;
        }
        .tab button {
            background-color: inherit;
            flex: 1;
            border: 1px solid white;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            text-align:center;
            font-size: 17px;
            color:white;
        }
        .tab button.active {
            background-color: blue;
        }
        .tabcontent {
            display: none;
            padding: 6px 12px;
            width: 80%;
            margin: 20px auto;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            color:white;
        }
        th, td {
            border: 1px solid white;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: blue;
        }
        a.chart-link {
            color: pink;
            text-decoration: underline;
        }
    </style>
</head>
<body>

    <div class="back-button">
        <a href="{% url 'home' %}">Back to Home</a>
    </div>

    <div class="tab">
        <button class="tablinks" onclick="openTab(event, 'VeryBullish')">Very Bullish</button>
        <button class="tablinks" onclick="openTab(event, 'Bullish')">Bullish</button>
    </div>

    <div id="VeryBullish" class="tabcontent">
        <h2>Very Bullish Signals</h2>
        {% include 'signal_table.html' with signals=very_bullish_signals %}
    </div>

    <div id="Bullish" class="tabcontent">
        <h2>Bullish Signals</h2>
        {% include 'signal_table.html' with signals=bullish_signals %}
    </div>

    <script>
        function openTab(evt, tabName) {
            var i, tabcontent, tablinks;

            // Hide all tabcontents
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i=0; i<tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            // Remove 'active' class from all tablinks
            tablinks = document.getElementsByClassName("tablinks");
            for (i=0; i<tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active","");
            }

            // Show the clicked tabcontent and set the button as active
            document.getElementById(tabName).style.display = "block";
            evt.currentTarget.className += " active";
        }

        // Set default open tab
        document.addEventitor('DOMContentLoaded', function(){
            document.querySelector('.tablinks').click();
        });

    </script>

</body>
</html>

<!-- templates/sell_signals.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sell Signals</title>
    <style>
        body {
            background-color: black;
            color: white;
        }
        .back-button {
            margin: 20px;
        }
        .back-button a {
            background-color: blue;
            color: white;
            padding: 10px;
            text-decoration: none;
            border-radius: 5px;
        }
        .tab {
            overflow: hidden;
            background-color: black;
            color: white;
            display: flex;
            justify-content: center;
            margin: 20px auto;
            width: 80%;
        }
        .tab button {
            background-color: inherit;
            flex: 1;
            border: 1px solid white;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            text-align:center;
            font-size: 17px;
            color:white;
        }
        .tab button.active {
            background-color: blue;
        }
        .tabcontent {
            display: none;
            padding: 6px 12px;
            width: 80%;
            margin: 20px auto;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            color:white;
        }
        th, td {
            border: 1px solid white;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: blue;
        }
        a.chart-link {
            color: pink;
            text-decoration: underline;
        }
    </style>
</head>
<body>

        <div class="back-button">
        <a href="{% url 'home' %}">Back to Home</a>
    </div>

    <div class="tab">
        <button class="tablinks" onclick="openTab(event, 'VeryBearish')">Very Bearish</button>
        <button class="tablinks" onclick="openTab(event, 'Bearish')">Bearish</button>
    </div>

    <div id="VeryBearish" class="tabcontent">
        <h2>Very Bearish Signals</h2>
        {% include 'signal_table.html' with signals=very_bearish_signals %}
    </div>

    <div id="Bearish" class="tabcontent">
        <h2>Bearish Signals</h2>
        {% include 'signal_table.html' with signals=bearish_signals %}
    </div>

    <script>
        function openTab(evt, tabName) {
            var i, tabcontent, tablinks;

            // Hide all tabcontents
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i=0; i<tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            // Remove 'active' class from all tablinks
            tablinks = document.getElementsByClassName("tablinks");
            for (i=0; i<tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active","");
            }

            // Show the clicked tabcontent and set the button as active
            document.getElementById(tabName).style.display = "block";
            evt.currentTarget.className += " active";
        }

        // Set default open tab
        document.addEventitor('DOMContentLoaded', function(){
            document.querySelector('.tablinks').click();
        });

    </script>

</body>
</html>

<!-- templates/sideways_signals.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sideways Signals</title>
    <style>
        body {
            background-color: black;
            color: white;
        }
        .back-button {
            margin: 20px;
        }
        .back-button a {
            background-color: blue;
            color: white;
            padding: 10px;
            text-decoration: none;
            border-radius: 5px;
        }
        .tab {
            overflow: hidden;
            background-color: black;
            color: white;
            display: flex;
            justify-content: center;
            margin: 20px auto;
            width: 80%;
        }
        .tab button {
            background-color: inherit;
            flex: 1;
            border: 1px solid white;
            outline: none;
            cursor: pointer;
            padding: 14px 16px;
            text-align:center;
            font-size: 17px;
            color:white;
        }
        .tab button.active {
            background-color: blue;
        }
        .tabcontent {
            display: none;
            padding: 6px 12px;
            width: 80%;
            margin: 20px auto;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            color:white;
        }
        th, td {
            border: 1px solid white;
            padding: 8px;
            text-align: center;
        }
        th {
            background-color: blue;
        }
        a.chart-link {
            color: pink;
            text-decoration: underline;
        }
    </style>
</head>
<body>

    <div class="back-button">
        <a href="{% url 'home' %}">Back to Home</a>
    </div>

    <h2 style="text-align:center;">Sideways Signals</h2>
    {% include 'signal_table.html' with signals=sideways_signals %}


</body>
</html>

<!-- templates/home.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Trading Signals - Home</title>
    <style>
        body {
            background-color: #121212;
            color: #FFFFFF;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        /* Navigation bar */
        .nav-bar {
            background-color: #1E1E1E;
            overflow: hidden;
        }
        .nav-bar a {
            float: left;
            color: #FFFFFF;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
        }
        .nav-bar a:hover {
            background-color: #575757;
            color: white;
        }
        .nav-bar a.active {
            background-color: #4CAF50;
            color: white;
        }
        /* Main content */
        .content {
            padding: 20px;
            width: 80%;
            margin: auto;
        }
        /* Chart container */
        .chart-container {
            margin: 40px auto;
            text-align: center;
        }
        .chart-container h2 {
            margin-bottom: 20px;
        }
        /* Symbol selection */
        .symbol-selection {
            margin-bottom: 20px;
        }
        .symbol-selection select {
            background-color: #1E1E1E;
            color: #FFFFFF;
            border: 1px solid #333333;
            padding: 5px;
            margin-left: 10px;
        }
        .symbol-selection label {
            font-size: 18px;
        }
        /* Top Movers */
        .top-movers {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-top: 40px;
        }
        .top-movers .column {
            flex: 1;
            min-width: 300px;
            margin: 10px;
        }
        .top-movers table {
            width: 100%;
            border-collapse: collapse;
            background-color: #1E1E1E;
            color: #FFFFFF;
        }
        .top-movers th, .top-movers td {
            border: 1px solid #333333;
            padding: 8px;
            text-align: center;
        }
        .top-movers th {
            background-color: #212121;
        }
        .top-movers tr:nth-child(even) {
            background-color: #2C2C2C;
        }
        .top-movers tr:hover {
            background-color: #333333;
        }
        /* Footer */
        .footer {
            background-color: #1E1E1E;
            color: #FFFFFF;
            text-align: center;
            padding: 10px;
            margin-top: 40px;
        }
    </style>
    <!-- Include TradingView library -->
    <script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
</head>
<body>
    <!-- Navigation Bar -->
    <div class="nav-bar">
        <a href="{% url 'home' %}" class="active">Home</a>
        <a href="{% url 'signal_list' %}?signal_type=VERY_BULLISH">Bullish Signals</a>
        <a href="{% url 'signal_list' %}?signal_type=VERY_BEARISH">Bearish Signals</a>
        <a href="{% url 'signal_list' %}?signal_type=SIDEWAYS">Sideways Signals</a>
        <a href="{% url 'signal_list' %}">All Signals</a>
    </div>

    <!-- Content -->
    <div class="content">
        <!-- Chart -->
        <div class="chart-container">
            <h2>Price Chart</h2>

            <!-- Symbol selection -->
            <form method="get" class="symbol-selection">
                <label for="symbol">Select Symbol:</label>
                <select name="symbol" id="symbol" onchange="this.form.submit()">
                    {% for symbol in symbols %}
                        <option value="{{ symbol }}" {% if symbol == default_symbol %}selected{% endif %}>{{ symbol }}</option>
                    {% endfor %}
                </select>
            </form>

            <!-- TradingView Advanced Chart Widget -->
            <div class="tradingview-widget-container">
                <div id="tradingview_chart"></div>
                <script type="text/javascript">
                    new TradingView.widget(
                      {
                        "width": "100%",
                        "height": 500,
                        "symbol": "BINANCE:{{ formatted_symbol }}",  // Adjusted to match TradingView symbol format
                        "interval": "D",
                        "timezone": "Etc/UTC",
                        "theme": "dark",
                        "style": "1",
                        "locale": "en",
                        "toolbar_bg": "#f1f3f6",
                        "enable_publishing": false,
                        "hide_side_toolbar": false,
                        "allow_symbol_change": true,
                        "container_id": "tradingview_chart"
                      }
                    );
                </script>
            </div>
        </div>

        <!-- Top Movers -->
        <div class="top-movers">
            <div class="column">
                <h3>Top Gainers (24h)</h3>
                <table>
                    <thead>
                        <tr>
                            <th>Symbol</th>
                            <th>24h % Change</th>
                            <th>Signal</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for signal in top_gainers %}
                            <tr>
                                <td>{{ signal.symbol }}</td>
                                <td>{{ signal.price_change_24h }}%</td>
                                <td>{{ signal.signal_type }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="column">
                <h3>Top Losers (24h)</h3>
                <table>
                    <thead>
                        <tr>
                            <th>Symbol</th>
                            <th>24h % Change</th>
                            <th>Signal</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for signal in top_losers %}
                            <tr>
                                <td>{{ signal.symbol }}</td>
                                <td>{{ signal.price_change_24h }}%</td>
                                <td>{{ signal.signal_type }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <div class="footer">
        © {{ current_year }} Trading Signals Bot
    </div>
</body>
</html>

<!-- templates/signal_table.html -->
<table>
    <thead>
        <tr>
            <th>#</th>
            <th>Run Date</th>
            <th>Timestamp</th>
            <th>Symbol</th>
            <th>Price</th>
            <th>24h Price Change</th>
            <th>Signal Type</th>
            <th>Stop Loss</th>
            <th>Take Profit</th>
            <th>Support</th>
            <th>Resistance</th>
            <th>Chart</th>
        </tr>
    </thead>
    <tbody>
        {% for signal in signals %}
            <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ signal.run_date|date:"Y-m-d H:i:s" }}</td>
                <td>{{ signal.timestamp|date:"Y-m-d H:i:s" }}</td>
                <td>{{ signal.symbol }}</td>
                <td>{{ signal.price }}</td>
                <td>{{ signal.price_change_24h|default:"N/A" }}</td>
                <td>{{ signal.signal_type }}</td>
                <td>{{ signal.stop_loss|default:"-" }}</td>
                <td>{{ signal.take_profit|default:"-" }}</td>
                <td>{{ signal.support|default:"-" }}</td>
                <td>{{ signal.resistance|default:"-" }}</td>
                <td><a href="{% url 'home' %}?symbol={{ signal.symbol }}" class="chart-link">View Chart</a></td>
            </tr>
        {% empty %}
            <tr>
                <td colspan="12">No Signals Available</td>
            </tr>
        {% endfor %}
    </tbody>
</table>
<!-- Pagination Controls -->
{% if signals.has_other_pages %}
    <div class="pagination">
        <span>
            Page {{ signals.number }} of {{ signals.paginator.num_pages }}
        </span>
        {% if signals.has_previous %}
            <a href="?{% for key, value in request.GET.items %}{% if key != page_param %}{{ key }}={{ value|urlencode }}&{% endif %}{% endfor %}{{ page_param }}={{ signals.previous_page_number }}">Previous</a>
        {% endif %}
        {% for num in signals.paginator.page_range %}
            {% if signals.number == num %}
                <strong>{{ num }}</strong>
            {% else %}
                <a href="?{% for key, value in request.GET.items %}{% if key != page_param %}{{ key }}={{ value|urlencode }}&{% endif %}{% endfor %}{{ page_param }}={{ num }}">{{ num }}</a>
            {% endif %}
        {% endfor %}
        {% if signals.has_next %}
            <a href="?{% for key, value in request.GET.items %}{% if key != page_param %}{{ key }}={{ value|urlencode }}&{% endif %}{% endfor %}{{ page_param }}={{ signals.next_page_number }}">Next</a>
        {% endif %}
    </div>
{% endif %}

Models.py
from django.db import models
from django.utils import timezone
from django.contrib.postgres.fields import JSONField  # For Django versions below 3.1 use JSONField from this module

class Signal(models.Model):
    timestamp = models.DateTimeField()
    symbol = models.CharField(max_length=30)
    timeframe = models.CharField(max_length=10, default='15m')  # Added to differentiate between timeframes
    signal_type = models.CharField(max_length=20)  # VERY_BULLISH, BULLISH, LESS_BULLISH, etc.
    price = models.FloatField()
    price_change_24h = models.FloatField(default=0.0)
    stop_loss = models.FloatField(null=True, blank=True)
    take_profit = models.FloatField(null=True, blank=True)
    risk_reward_ratio = models.FloatField(null=True, blank=True)
    market_regime = models.CharField(max_length=20, null=True, blank=True)
    run_date = models.DateTimeField(default=timezone.now)
    additional_info = models.JSONField(null=True, blank=True)  # Requires Django 3.1+, use JSONField from django.db.models if using older versions

    def __str__(self):
        return f"{self.timestamp} - {self.symbol} ({self.timeframe}): {self.signal_type}"

views.py
import csv
from django.shortcuts import render
from django.http import HttpResponse, JsonResponse
from django.core.paginator import Paginator
from .models import Signal
from django.db.models import Q
from django.utils import timezone

def home(request):
    # Get unique symbols
    symbols = Signal.objects.values_list('symbol', flat=True).distinct()

    # Get the selected symbol or default to BTCUSDT
    default_symbol = request.GET.get('symbol', 'BTC/USDT')
    formatted_symbol = default_symbol.replace('/', '')

    # Get top gainers and losers
    top_gainers = Signal.objects.filter(run_date__gte=timezone.now()-timezone.timedelta(hours=24)).order_by('-price_change_24h')[:5]
    top_losers = Signal.objects.filter(run_date__gte=timezone.now()-timezone.timedelta(hours=24)).order_by('price_change_24h')[:5]

    context = {
        'symbols': symbols,
        'default_symbol': default_symbol,
        'formatted_symbol': formatted_symbol,
        'top_gainers': top_gainers,
        'top_losers': top_losers,
        'current_year': timezone.now().year,
    }
    return render(request, 'home.html', context)

def signal_list(request):
    # Fetch signals based on filters
    signals = Signal.objects.all()

    # Apply filters based on request parameters
    symbol_filter = request.GET.get('symbol', '')
    date_from = request.GET.get('date_from', '')
    date_to = request.GET.get('date_to', '')
    price_change_min = request.GET.get('price_change_min', '')
    price_change_max = request.GET.get('price_change_max', '')
    signal_type_filter = request.GET.get('signal_type', '')
    timeframe_filter = request.GET.get('timeframe', '')

    # Apply filters
    if symbol_filter:
        signals = signals.filter(symbol__icontains=symbol_filter)
    if date_from:
        signals = signals.filter(timestamp__gte=date_from)
    if date_to:
        signals = signals.filter(timestamp__lte=date_to)
    if price_change_min:
        signals = signals.filter(price_change_24h__gte=price_change_min)
    if price_change_max:
        signals = signals.filter(price_change_24h__lte=price_change_max)
    if signal_type_filter:
        signals = signals.filter(signal_type=signal_type_filter)
    if timeframe_filter:
        signals = signals.filter(timeframe=timeframe_filter)

    # Sorting
    sort_by = request.GET.get('sort_by', 'id')
    sort_order = request.GET.get('sort_order', 'asc')
    if sort_order == 'desc':
        sort_by = '-' + sort_by
    signals = signals.order_by(sort_by)

    # Pagination
    paginator = Paginator(signals, 50)  # Show 50 signals per page
    page_number = request.GET.get('page')
    signals_page = paginator.get_page(page_number)

    context = {
        'signals': signals_page,
        'symbol_filter': symbol_filter,
        'date_from': date_from,
        'date_to': date_to,
        'price_change_min': price_change_min,
        'price_change_max': price_change_max,
        'signal_type_filter': signal_type_filter,
        'timeframe_filter': timeframe_filter,
        'sort_by': sort_by,
        'sort_order': sort_order,
        'request': request,
    }
    return render(request, 'signal_list.html', context)

def fetch_signals_ajax(request):
    # This view returns signals in JSON format for AJAX updates
    signals = Signal.objects.all()

    # Apply filters based on request parameters (same as signal_list view)
    # ... (same filter code as above)

    # Serialize signals to JSON
    signals_data = []
    for signal in signals:
        signals_data.append({
            'id': signal.id,
            'run_date': signal.run_date.strftime('%Y-%m-%d %H:%M:%S'),
            'timestamp': signal.timestamp.strftime('%Y-%m-%d %H:%M:%S'),
            'symbol': signal.symbol,
            'timeframe': signal.timeframe,
            'price': signal.price,
            'price_change_24h': signal.price_change_24h,
            'signal_type': signal.signal_type,
            'stop_loss': signal.stop_loss,
            'take_profit': signal.take_profit,
            'support': signal.additional_info.get('support'),
            'resistance': signal.additional_info.get('resistance'),
            'risk_reward_ratio': signal.risk_reward_ratio,
            'market_regime': signal.market_regime,
            'other_timeframe_signals': signal.additional_info.get('other_timeframe_signals'),
            'analysis_results': signal.additional_info.get('analysis_results'),
        })

    return JsonResponse({'signals': signals_data})

def export_signals(request):
    signals = Signal.objects.all()

    # Apply the same filters as in signal_list
    # ... (same filter code)

    # Create the HttpResponse object with CSV header
    response = HttpResponse(content_type='text/csv')
    response['Content-Disposition'] = 'attachment; filename="signals.csv"'

    writer = csv.writer(response)
    writer.writerow([
        'Run Date', 'Timestamp', 'Symbol', 'Timeframe', 'Price', '24h Price Change', 'Signal Type',
        'Stop Loss', 'Take Profit', 'Support', 'Resistance', 'Risk-Reward Ratio', 'Market Regime'
    ])

    for signal in signals:
        writer.writerow([
            signal.run_date,
            signal.timestamp,
            signal.symbol,
            signal.timeframe,
            signal.price,
            signal.price_change_24h,
            signal.signal_type,
            signal.stop_loss or '',
            signal.take_profit or '',
            signal.additional_info.get('support', ''),
            signal.additional_info.get('resistance', ''),
            signal.risk_reward_ratio or '',
            signal.market_regime or '',
        ])

    return response

urls.py
from django.urls import path
from . import views
from .views import home

urlpatterns = [
    path('', views.home, name='home'),
    path('signals/', views.signal_list, name='signal_list'),
    path('fetch_signals_ajax/', views.fetch_signals_ajax, name='fetch_signals_ajax'),
    path('export_signals/', views.export_signals, name='export_signals'),