{% extends 'base.html' %}
{% set active_page = 'result' %}

{% block style %}
body {
    background-image: url({{ url_for('static', filename='img/money.jpeg') }});
    background-repeat: no-repeat; /* Do not repeat the image */
    background-size: cover;
}
{% endblock style %}

{% block title %}Strategy Page{% endblock%}
{% block content %}
<div class="container-fluid fade-in" style="background-color: #eee;">
    <div class="container-fluid px-1 py-4">
        <div class="alert alert-success p-3 mx-3" role="alert">
            <h4 class="alert-heading">Well done!</h4>
            <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
            <hr>
            <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
            <div class='d-flex justify-content-end'>
                <div>
                    <select id="competition" class="form-select" size="1" aria-label="size 5 select example">
                        {% include 'competitions.html' %}
                    </select>
                </div>
                <div>
                    <button id="changeComp" type="button" class="btn btn-info"><i class="fa-duotone fa-person-running"></i></button>
                </div>
            </div>
        </div>
        <div class="card m-3">
            <div card="card p-3 m-3">
                <div class="card-header">
                    
                    <div class="d-flex">
                        <div class="py-2 font-bold text-xl">
                            <span class='m-2'>策略顯示</span>
                        </div>
                        <div class="dropdown ms-auto py-2">
                            <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                              排行方式
                            </button>
                            <ul class="dropdown-menu">
                              <li><a class="dropdown-item" href="#">我的策略</a></li>
                              <li><a class="dropdown-item" href="#">時間排行</a></li>
                              <li><a class="dropdown-item" href="#">報酬排行</a></li>
                              <li><a class="dropdown-item" href="#">ＳＲ排行</a></li>
                              <li><a class="dropdown-item" href="#">波動率排行</a></li>
                            </ul>
                        </div>
                    </div>
                    
                    
                </div>
                <div class="p-3">
                    <table class="table caption-top">
                        <caption></caption>
                        <thead>
                            <tr>
                                <th scope="col">#ID</th>
                                <th scope="col">投組名稱</th>
                                <th scope="col">創建者</th>
                                <th scope="col">報酬率</th>
                                <th scope="col">夏普率</th>
                                <th scope="col">波動率</th>
                                <th scope="col">創建時間</th>
                            </tr>
                        </thead>
                        {% for info in  strategy_data %}
                        <thead style="font-size: 1vmin'">
                            <tr>
                                <th scope="col" role="alert">
                                    <a href="" class="alert-link">
                                        {{ info[0] }}
                                    </a>
                                </th>
                                <td>{{ info[2] }}</td>
                                <td>{{ info[3] }}</td>
                                <td>{{ info[4] }}</td>
                                <td>{{ info[6] }}</td>
                                <td>{{ info[5] }}</td>
                                <td>{{ info[1] }}</td>
                            </tr>
                        </thead>
                        {% endfor %}
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>

{% endblock %}