program-area-pages-cards.html

<!-- These are the cards found on a program area page, such as the cards on https://www.hackforla.org/citizen-engagement webpage. -->

{% assign visible_projects = site.projects | where: "program-area", "Citizen Engagement" | where: "visible", "true" %}
             {% for item in visible_projects %}
             {%- if
                item.problem.size > 0 and
                item.solution.size > 0 and
                item.impact.size > 0 and
                item.sdg.size > 0 and
                item.sdg-image-src.size > 0
                -%}
                  <div class="page-card card-primary page-card-lg program-area" data-dropdown>
                        <img class="card-image" src="{{ item.image }}" alt="">
                           <div class="mobile-card-info-container">
                               <div class="mobile-card-nav">
                                {% assign project_relative_path = item.slug | prepend: "../projects/" %}
                                <h3><a class="project-card-mini-title" href="{{ project_relative_path }}">{{ item.title }}</a></h3>
                                   <input class="dropdown-arrow" data-dropdown-arrow type="image" src="/assets/images/citizen-engagement/arrow-button-icon.svg" alt="dropdown-arrow">
                               </div>
                               <div class="project-dropdown">
                                    <div class="problem-info">
                                        <h4>Problem</h4>
                                        <p>{{ item.problem }}</p>
                                    </div>
                                    <div class="solution-info">
                                        <h4>Solution</h4>
                                        <p>{{ item.solution }}</p>
                                    </div>
                                    <div class="impact-info">
                                        <h4>Impact</h4>
                                        <p>{{ item.impact }}</p>
                                    </div>
                            </div>
                        </div>
                    <div class="sustainable-dev-goal">
                        <h4>Sustainable Development Goal</h4>
                        <div class="card-bottom-info">
                            <img class="sdg-image" src="{{ item.sdg-image-src }}" alt="{{ item.sdg-image-alt }}">
                                    <p>{{ item.sdg }}</p>
                        </div>
                    </div>
                </div>
                {%- else -%}
                     <div class="page-card card-primary page-card-lg missing-area" data-dropdown>
                        <div class="mobile-card-info-container">
                            {% assign project_relative_path = item.slug | prepend: "../projects/" %}
                            <h3><a class="project-card-mini-title" href="{{ project_relative_path }}">{{ item.title }}</a></h3>
                            <p>We are currently drafting the Problem, Solution and Impact statements for this project.</p>
                        </div>
                   </div>
                {%- endif -%}
            {% endfor %}