{% extends 'base.html' %}
{% load static %}
{% load user_tags %}
{% block title %}WManage{% endblock %}

{% block content %}
<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h4 class="h3 mt-0 font-weight-normal">
                    Carteira de Ações
                </h4>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    {% if status_fechado_aberto == 'Mercado fechado' %}
                    <li><i class="fa fa-circle text-danger"></i> {{status_fechado_aberto}}&ensp;
                    </li>
                    {% elif status_fechado_aberto == 'Aguardando Atualizacao' %}
                    <li><i class="fa fa-circle text-warning"></i> {{status_fechado_aberto}}&ensp;
                    </li>
                    {%else%}
                    <li><i class="fa fa-circle text-success"></i> {{status_fechado_aberto}}&ensp;</li>
                    {%endif%}
                    <li><i>{{b3_nome}} =>&ensp;</i></li>
                    <li><i> {{b3_indice}}&ensp;</i></li>
                    <li><i> {{b3_porcentagem}}</i></li>
                </ol>
            </div>
        </div>
    </div>
</section>
{% include 'status.html' %}
<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <!-- /.card-header -->
                    <div class="card-body">
                        <!-- HTML to write -->
                        <a href="#" data-data-animation="true" style="width: 250px;" data-html="true"
                            data-toggle="tooltip" title="
                    A carteira de ações é calculada baseada nos valores de compra e venda que são lançados.
                    <strong>Observação:</strong>
                    <small>
                    <span class=&quot;fs-2 fw-900&quot;>O lucro que é calculado, não é baseado no valor médio da ação, ele se basea apenas na compra e venda que foi realizada durante os periodos lançados.</span>
                    </small>">Ajuda <i class="fa fa-question-circle"></i></a>
                        <table id="paginator" class="table table-bordered table-hover">
                            <thead class="thead-dark">
                                <tr>
                                    <th></th>
                                    <th>Ativo</th>
                                    <th>Qtde.</th>
                                    <th>Preço Médio.</th>
                                    <th>V.Compra Total</th>
                                    <th>Custo</th>
                                    <th>V.Mercado Unit.</th>
                                    <th>V.Mercado Total</th>
                                    <th>Lucro</th>
                                    <th>Variação Preço</th>
                                    <th>Variação</th>
                                    <th>#</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for nota in result_c %}
                                <tr>
                                    <td><img src="{%static 'img/acoes/'%}{{nota.ativo|slice:4}}.png" alt="{{nota.ativo}}" width="30" height="30" style="border-radius: 4px; overflow: hidden; display: flex; background: rgb(239,239,239);"></td>
                                    <td>{{nota.ativo|upper}}</td>
                                    <td>{{nota.qt}}</td>
                                    <td>{{nota.preco_medio}}</td>
                                    <td>{{nota.preco_f}}</td>
                                    <td>{{nota.custos}}</td>
                                    <td>{{nota.preco_m}}</td>
                                    <td>{{nota.v_mercado}}</td>
                                    {% if nota.lucro > 'R$ 0,00' %}
                                    <td>
                                        <span class="text-success">
                                            <i class="fa fa-arrow-up"></i>
                                            {{nota.lucro}}
                                        </span>
                                    </td>
                                    {% else %}
                                    <td>
                                        <span class="text-danger lucro">
                                            <i class="fa fa-arrow-down"></i>
                                            {{nota.lucro}}
                                        </span>
                                    </td>
                                    {% endif %}
                                    {% if nota.variacao_1 > '-0' %}
                                    <td>
                                        <span class='text-danger lucro'>
                                            <i class="fa fa-arrow-down"></i>
                                            R$ {{nota.variacao_1}}
                                        </span>
                                    </td>
                                    {% else %}
                                    <td>
                                        <span class='text-success lucro'>
                                            <i class="fa fa-arrow-up"></i>
                                            R$ {{nota.variacao_1}}
                                        </span>
                                    </td>
                                    {% endif %}
                                    {% if nota.variacao_2 > '(-0)' %}
                                    <td><span class='text-danger'>{{nota.variacao_2}}</span></td>
                                    {% else %}
                                    <td><span class='text-success'>{{nota.variacao_2}}</span></td>
                                    {% endif %}
                                    <th scope="row" class="text-primary">
                                        <a href="{% url 'temporal-chart' nota.ativo %}">
                                            <i class="fa-solid fa-chart-line"></i>
                                        </a>
                                    </th>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="11">Nenhum registro encontrado.</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                            <tfoot class="thead-dark">
                                <tr>
                                    <th></th>
                                    <th>Ativo</th>
                                    <th>Qtde.</th>
                                    <th>Preço Médio.</th>
                                    <th>V.Compra Total</th>
                                    <th>Custo</th>
                                    <th>V.Mercado Unit.</th>
                                    <th>V.Mercado Total</th>
                                    <th>Lucro</th>
                                    <th>Variação Preço</th>
                                    <th>Variação</th>
                                    <th>#</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
            <!-- /.col -->
        </div>
        <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
</section>

{% endblock %}