{% extends "base.html" %} {% block content %}

<div class="container-fluid mt-4" style="padding-top: 20px;">
  <div class="card" style="background-color: #f0f8ff; border: 1px solid #b0c4de; box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);font-family: 'Roboto', sans-serif;">
    <div class="card-body custom-form">

        <style>
            #loading {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: #fff; 
                display: flex;
                justify-content: center;
                align-items: center;
                z-index: 9999; 
            }
        </style>


        <div id="loading">
            <img src="{{ url_for('static', filename='1.gif') }}" alt="Loading...">
        </div>
        
        
       
        <div style="display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 10px;">
            <h4 style="padding-right: 30px; margin: 0;">{{ stock_id }} - {{ stock_name }}</h4>
            <form method="POST" action="/stock_detail_year" style="display: flex; flex-wrap: wrap; align-items: center;">
                <input type="hidden" name="stock_id" value="{{ stock_id }}">
                <input type="hidden" name="stock_name" value="{{ stock_name }}">
                <input type="hidden" name="macd_min" value="{{ macd_min }}">
                <input type="hidden" name="macd_max" value="{{ macd_max }}">
        
                <!-- 日期區間按鈕 -->
                <button type="submit" name="months" value="1" style="margin: 5px;" class="btn {% if months == 1 %}btn-danger{% else %}btn-outline-danger{% endif %} fw-bold">1 個月</button>
                <button type="submit" name="months" value="2" style="margin: 5px;" class="btn {% if months == 2 %}btn-danger{% else %}btn-outline-danger{% endif %} fw-bold">2 個月</button>
                <button type="submit" name="months" value="3" style="margin: 5px;" class="btn {% if months == 3 %}btn-danger{% else %}btn-outline-danger{% endif %} fw-bold">3 個月</button>
                <button type="submit" name="months" value="6" style="margin: 5px;" class="btn {% if months == 6 %}btn-danger{% else %}btn-outline-danger{% endif %} fw-bold">6 個月</button>
                <button type="submit" name="months" value="9" style="margin: 5px;" class="btn {% if months == 9 %}btn-danger{% else %}btn-outline-danger{% endif %} fw-bold">9 個月</button>
                <button type="submit" name="months" value="12" style="margin: 5px;" class="btn {% if months == 12 %}btn-danger{% else %}btn-outline-danger{% endif %} fw-bold">12 個月</button>
                <button type="submit" name="months" value="18" style="margin: 5px;" class="btn {% if months == 18 %}btn-danger{% else %}btn-outline-danger{% endif %} fw-bold">18 個月</button>
                <button type="submit" name="months" value="24" style="margin: 5px;" class="btn {% if months == 24 %}btn-danger{% else %}btn-outline-danger{% endif %} fw-bold">2 年</button>
                <button type="submit" name="months" value="36" style="margin: 5px;" class="btn {% if months == 36 %}btn-danger{% else %}btn-outline-danger{% endif %} fw-bold">3 年</button>
                <button type="submit" name="months" value="48" style="margin: 5px;" class="btn {% if months == 48 %}btn-danger{% else %}btn-outline-danger{% endif %} fw-bold">4 年</button>
                <button type="submit" name="months" value="60" style="margin: 5px;" class="btn {% if months == 60 %}btn-danger{% else %}btn-outline-danger{% endif %} fw-bold">5 年</button>
                <button type="submit" name="months" value="120" style="margin: 5px;" class="btn {% if months == 120 %}btn-danger{% else %}btn-outline-danger{% endif %} fw-bold">10 年</button>
            </form>
        </div>
        
        
        <div style="display: flex; align-items: center; margin-top: 10px;">
            <form method="POST" action="/stock_detail_year" style="display: flex; align-items: center;">
                <input type="hidden" name="stock_id" value="{{ stock_id }}">
                <input type="hidden" name="stock_name" value="{{ stock_name }}">
                <input type="hidden" name="months" value="{{ months }}">
                
                <label for="macd_min" style="margin-right: 5px;">MACD 最小值：</label>
                <input type="number" step="0.1" id="macd_min" name="macd_min" value="{{ macd_min }}" style="width: 80px; margin-right: 15px;">
                
                <label for="macd_max" style="margin-right: 5px;">MACD 最大值：</label>
                <input type="number" step="0.1" id="macd_max" name="macd_max" value="{{ macd_max }}" style="width: 80px; margin-right: 15px;">
                
                <button type="submit" class="btn btn-primary">更新MACD範圍</button>
            </form>
        </div>
        
        <div style="width: 100%; overflow-x: auto;">
            {{ k_line_html|safe }}
        </div>
        
        
        


  </div>
 </div>
</div>


<script>
    window.onload = function() {
        document.getElementById("loading").style.display = "none";
        document.getElementById("content").style.display = "block";
    };
</script>

{% endblock %}