<div class="page-heading compact">
    <div>
        <span>Модул 4</span>
        <h1>Petition Generator</h1>
        <p>Създай публична петиция, събирай подкрепа и следи напредък.</p>
    </div>
</div>

<section class="two-column">
    <article class="panel">
        <form class="stack-form js-petition-form" action="/petitions" method="post">
            <?= csrf_field() ?>
            <label>Заглавие
                <input name="title" value="За безопасни тротоари в квартала">
            </label>
            <label>Описание
                <textarea name="description">Настояваме за спешен ремонт на опасните тротоари и публичен график за изпълнение.</textarea>
            </label>
            <label>Цели
                <textarea name="goals">Оглед на място, публикуван срок, ремонт и публичен отчет за изпълнението.</textarea>
            </label>
            <label>Цел подкрепящи
                <input type="number" name="goal" value="1200" min="10">
            </label>
            <button class="btn btn-success" type="submit"><i class="bi bi-people"></i> Създай петиция</button>
        </form>
    </article>

    <aside class="panel">
        <div class="panel-head">
            <h2>Активни петиции</h2>
            <a href="#">Публична страница</a>
        </div>
        <div class="petition-list">
            <?php foreach ($petitions as $petition): ?>
                <?php $progress = min(100, round($petition['supporters'] / $petition['goal'] * 100)); ?>
                <article>
                    <div>
                        <strong><?= e($petition['title']) ?></strong>
                        <span><?= e($petition['supporters']) ?> / <?= e($petition['goal']) ?> подкрепящи</span>
                    </div>
                    <div class="progress" role="progressbar" aria-valuenow="<?= e($progress) ?>" aria-valuemin="0" aria-valuemax="100">
                        <div class="progress-bar" style="width: <?= e($progress) ?>%"></div>
                    </div>
                </article>
            <?php endforeach; ?>
        </div>
    </aside>
</section>
