live_view_form.html.eex

<section class="container hero page-header">
    <%= PartialsView.maybe_render_am_notes(@am_notes) %>
    <div class="hero-body">
        <div class="container">
            <h1 class="title">
                <%= @contact.name %>
            </h1>
            <h2 class="subtitle">
                <%= @page_title %>
            </h2>
        </div>
    </div>
</section>

<section class="container">

    <div class="columns">

        <div class="column <%= if not is_nil(@page_menu), do: "is-three-quarters" %>">
            <%= f = form_for @changeset, "#", [class: "liveview-container", phx_change: :validate, phx_submit: :save] %>
            <div class="accordions">

                <fieldset <%= if @loading?, do: "disabled" %>>

                    <%= for {section, i} <- Enum.with_index(@sections, 1) do %>
                    <div class="accordion">
                        <button type="button" class="accordion-toggle contact-profile <%= if @open_section[i], do: "is-active" %>" phx-click="accordion-toggle" phx-value="<%= i %>"><%= section.title %><span class="icon"><i class="fas fa-chevron-right"></i></span></button>

                        <div class="accordion-content">
                            <div class="columns profile-fields is-centered">

                                <div class="column is-half">

                                    <%= for field <- section.fields do %>

                                    <div class="field">
                                        <div class="field-container <%= if @editable?, do: "is-borderless" %>">
                                            <%= label f, field.api_name, field.label, class: "label profile-field-label" %>
                                            <%= if field.required do %>
                                            <span class="profile-field-required">*</span>
                                            <% end %>
                                            <div class="control has-icons-right">
                                                <%= case field.type do %>
                                                <% "lookup" -> %>
                                                <%= live_render(@socket, LookupLive, session: %{editable?: @editable?, form: f, field: field, object: @contact}, child_id: "lookup_#{field.api_name}") %>
                                                <% _ -> %>
                                                <span class="profile-field-value <%= if @editable?, do: "is-hidden" %>">
                                                    <%= Map.fetch!(@contact, field.api_name) %>
                                                </span>
                                                <%= render_input(f, field, @editable?) %>
                                                <%= if f.errors[field.api_name] do %>
                                                <span class="icon is-small is-right has-text-danger">
                                                    <i class="fas fa-exclamation-circle has-animation-attention"></i>
                                                </span>
                                                <% end %>
                                                <% end %>
                                                <%= error_tag f, field.api_name %>
                                            </div>
                                        </div>
                                        <%= if not is_nil(field.help_text) do %>
                                        <p class="help help-text"><%= field.help_text %></p>
                                        <% end %>
                                    </div>

                                    <% end %>
                                </div>

                            </div>
                        </div>
                    </div>
                    <% end %>

                </fieldset>

                <div class="accordion-footer">
                    <div class="control">
                        <button type="button" class="button is-primary is-fixed-width is-pulled-right has-no-spinner <%= if @editable?, do: "is-hidden" %>" id="profile-edit" phx-click="toggle-edit-mode" phx-value="true">
                            <span class="icon is-small"><i class="fas fa-edit"></i></span>
                            <span>Edit</span>
                        </button>
                    </div>
                    <div class="control">
                        <button type="button" class="button <%= if !@editable?, do: "is-hidden" %> has-no-spinner" id="profile-edit-cancel" phx-click="toggle-edit-mode" phx-value="false">Cancel</button>
                        <button type="submit" class="button is-primary is-fixed-width <%= if !@editable?, do: "is-hidden" %> <%= if @loading?, do: "is-loading" %> is-pulled-right" id="profile-save">
                            <span class="icon is-small"><i class="fas fa-save"></i></span>
                            <span><%= @save_button_label %></span>
                            <%= PartialsView.render_spinner_svg() %>
                        </button>
                    </div>
                </div>
            </div>

            </form>
        </div>

        <%= if not is_nil(@page_menu) do %>
        <div class="column is-one-quarter">
            <%= PageHandlerView.render("page_menu.html", page_menu: @page_menu) %>
        </div>
        <% end %>
    </div>

</section>