{% extends 'base.html.twig' %}

{% block title %}Rozliczenie podatkowe{% endblock %}
{% block body %}
    <div class="main-container">
        <section class="card"
            data-controller="app"
            data-app-step-value="1"
                 {% if currentHash %}
                    data-app-show-url-value="{{ path('app_taxes_dividend_show',{'hash': currentHash}) }}"
                 {% endif %}
        >
            <div class="rail">
                {% for row in [{i:'1', label:'Wybór'}, {i:'2', label:'Pliki'}, {i:'3', label:'Wynik'}] %}
                    <div class="rail-step"
                         data-app-target="railStep"
                         data-index="{{ loop.index }}">
                        <div class="rail-dot">{{ row.i }}</div>
                        <span class="rail-label">{{ row.label }}</span>
                    </div>
                    {% if not loop.last %}
                        <div class="rail-line"></div>
                    {% endif %}
                {% endfor %}
            </div>
            <div class="loading-all" data-app-target="step" data-step="0">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
            </div>
            <div class="choices" data-app-target="step" data-step="1" hidden>
                <button type="button" class="choice" data-label="Dywidendy" data-type="dividends" data-action="app#pick" data-endpoint="{{ path('app_taxes_summary',{type:"dividend"}) }}">
                    <div class="choice-icon div">%</div>
                    <div class="choice-body">
                        <div class="choice-title">Dywidendy</div>
                        <div class="choice-sub">Akcje krajowe i zagraniczne · podatek 19%</div>
                    </div>
                    <span class="arrow">→</span>
                </button>
                <button type="button" class="choice" data-label="Kryptowaluty" data-type="crypto" data-action="app#pick" data-endpoint="{{ path('app_taxes_summary',{type:"crypto"}) }}">
                    <div class="choice-icon crypto">₿</div>
                    <div class="choice-body">
                        <div class="choice-title">Kryptowaluty</div>
                        <div class="choice-sub">Sprzedaż aktywów · dochód i podatek 19%</div>
                    </div>
                    <span class="arrow">→</span>
                </button>
            </div>

            <div data-app-target="step" data-step="2" hidden>
                <div class="head-row">
                    <span class="dot" data-app-target="accentDot"></span>
                    <span class="head-label" data-app-target="choiceLabel"></span>
                    <button type="button" class="link" data-action="app#back">wstecz</button>
                </div>

                <div class="dropzone"
                     data-action="dragover->app#dragOver dragleave->app#dragLeave drop->app#drop"
                     data-app-target="dropzone">

                    <div class="icon">↑</div>
                    <div class="title">Przeciągnij pliki lub wybierz z komputera</div>
                    <div class="sub">CSV lub XLSX · możesz wgrać kilka naraz</div>

                    <input type="file" accept=".csv,.xlsx" multiple hidden
                        data-app-target="input"
                        data-action="app#onFiles"
                    >
                    <div class="chips" data-app-target="chips" hidden></div>
                    <button type="button" class="btn-dark"
                        data-app-target="submitBtn"
                        data-action="app#submit">Wybierz pliki</button>
                    <button type="button" class="link add-more" hidden
                            data-app-target="addMore"
                            data-action="app#openPicker">dodaj kolejne</button>

                    <div class="error" data-app-target="error" hidden></div>

                </div>
            </div>
            <div data-app-target="step" data-step="3" hidden>
                <div data-app-target="result"></div>
            </div>
        </section>
    </div>
{% endblock %}