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

{% block style %}

{% endblock style %}

{% block title %}Result Page{% endblock%}
{% block content %}
<div class="container-fluid" style="background-color: #eee;">
    <div class="container-fluid px-1 py-4">
        <div class="alert alert-secondary p-3 mx-3" role="alert">
            <div class="flex-row">
                <p class="font-italic font-bold text-xl">
                    "Risk comes from not knowing what you're doing."
                </p>
            </div>
            <div class="d-flex flex-row-reverse">
                <p class="align-self-end text-xs">- Warren Edward Buffett</p>
            </div>
            
            <hr class="my-3 px-5">
            
            <div class='d-flex justify-content-end'>
                <div class="input-group mb-3"> 
                    <span class="input-group-text" id="in">選擇競賽</span>
                    <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-secondary"><i class="bi bi-arrow-right-square-fill"></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-responsive-sm table-responsive-md table-responsive-xl">
                    <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">
                                        <span class="badge rounded-pill text-bg-info">{{ info[0] }}</span>
                                    </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 %}
{% block script %}


{% endblock script %}