{% extends 'main_base.html.twig' %}
{% block styles %}{% endblock %}
{% block content %}
    <section class="position-relative" id="banner">
        <img src="{{ asset('assets/main/img/hissedarlar-banner.png') }}" alt="Banner" class="img-fluid w-100">
        <div class="position-absolute start-0 bottom-0 w-100">
            <div class="container-90 px-20">
                <ol class="breadcrumb pb-0 pb-md-0">
                    <li class="breadcrumb-item"><a href="#" class="text-white">ANASAYFA</a></li>
                    <li class="breadcrumb-item text-muted">HİSSEDARLAR</li>
                </ol>
            </div>
        </div>
    </section>
    <section class="bg-white py-20" id="filter">
        <div class="container-80">
            <div class="card shadow-sm">
                <div class="card-header align-items-center row">
                    <div class="d-flex align-items-center col">
                        <label class="me-5 fw-bolder" for="filterSector">FİLTRELE</label>
                        <select class="form-select form-select-solid rounded-pill" id="filterSector">
                            <option class="" value="1">En Çok Yatıranlar</option>
                            <option class="" value="2">En Az Yatıranlar</option>
                        </select>
                    </div>
                    <div class="align-items-center bg-gray-200 d-flex mt-2 p-1 rounded-pill mw-100 col">
                        <button class="w-150px form-control form-control-transparent rounded-pill bg-white">Bireysel</button>
                        <button class="w-150px form-control form-control-transparent rounded-pill">Kurumsal</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="bg-white py-20" id="yatirimlar">
        <div class="container-80">
            <div class="row">
                {% for i in 1..20 %}
                    <div class="col mb-20 animate__animated" data-animate="animate__fadeInUp">
                        <div class="card shadow-sm bg-white bg-hover-dark text-dark text-hover-light">
                            <div class="card-body">
                                <div class="text-center">
                                    <span class="d-inline-block w-75px h-75px rounded-circle mt-n5 p-5 bg-gray-200 translate-middle-y text-dark">A Grubu</span>
                                    <p class="mw-225px mb-20 mt-n5 mx-auto fs-5">
                                        Sum Koçluk Eğitim
                                        Danışmanlık A.Ş.
                                    </p>
                                </div>
                                <div class="d-flex justify-content-between">
                                    <b>8.924.000₺</b>
                                    <b>0.60%</b>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% if loop.index is divisible by (5) %}
                        <div class="col-12"></div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    </section>

    <section id="yetkiBelgelerimiz">
        <div class="container-80 py-20">
            <div class="row">
                <div class="col-lg-8">
                    <h2>Sertifika ve Belgeler</h2>
                    <p>Sistemimize ait yetki belgeleri ve uzmanlık alanlarımızı görmek istermisiniz ?</p>
                </div>
                <div class="col-lg-4 text-end">
                    <a href="" class="btn btn-lg btn-bg-dark btn-active-success btn-text-success btn-active-text-dark rounded-pill">Yetki Belgelerimiz</a>
                </div>
            </div>
        </div>
    </section>
{% endblock %}