app/components/budgets/phases_component.html.erb
<section class="budget-phases">
<header>
<h2><%= t("budgets.index.all_phases") %></h2>
</header>
<ul class="phases-list tabs" data-tabs id="budget_phases_tabs" data-deep-link="true">
<% phases.each do |phase| %>
<li class="phase-title tabs-title <%= "is-active current-phase-tab" if phase.current? %>">
<a href="#<%= phase_dom_id(phase) %>">
<% if phase.current? %>
<span class="current-phase-timeline"><%= t("budgets.index.current_phase") %></span>
<% end %>
<span class="phase-name"><%= phase.name %></span>
</a>
</li>
<% end %>
</ul>
<div class="tabs-content" data-tabs-content="budget_phases_tabs">
<% phases.each do |phase| %>
<div id="<%= phase_dom_id(phase) %>" class="tabs-panel <%= "is-active" if phase.current? %>">
<div class="tabs-controls">
<% if phase == phases.first %>
<span class="budget-prev-phase-disabled"></span>
<% else %>
<a href="#<%= prev_phase_dom_id(phase) %>" title="<%= t("budgets.index.prev_phase") %>"
data-turbolinks="false"
class="budget-prev-phase">
<span><%= t("budgets.index.prev_phase") %></span>
</a>
<% end %>
<% if phase == phases.last %>
<span class="budget-next-phase-disabled"></span>
<% else %>
<a href="#<%= next_phase_dom_id(phase) %>" title="<%= t("budgets.index.next_phase") %>"
data-turbolinks="false"
class="budget-next-phase">
<span><%= t("budgets.index.next_phase") %></span>
</a>
<% end %>
</div>
<div class="budget-phase">
<div class="budget-phase-content">
<h3><%= phase.name %></h3>
<p><%= start_date(phase) %> - <%= end_date(phase) %></p>
<%= auto_link_already_sanitized_html(wysiwyg(phase.description)) %>
<% if phase.main_link_text.present? && phase.main_link_url.present? %>
<%= link_to phase.main_link_text, phase.main_link_url, class: "main-link" %>
<% end %>
</div>
<% if phase.image.present? %>
<div class="budget-phase-image">
<%= image_tag phase.image.variant(:large), alt: "" %>
</div>
<% end %>
</div>
</div>
<% end %>
</div>
</section>