denny/ShinyCMS-ruby

<% @page_title = t( '.title', name: @profile.name ) %>

<%= form_for @profile, url: shiny_profiles.profile_path( @profile.username ), method: :put do |f| %>
  <p>
    <%= f.label :public_name %>
    <br><%= f.text_field :public_name %>
  </p>

  <p>
    <%= f.label :public_email %>
    <br><%= f.text_field :public_email %>
  </p>

  <p>
    <%= f.label :profile_pic %>
    <br><%= f.file_field :profile_pic %>
    <% if @profile.profile_pic.attached? %>
    <br><%= image_tag url_for( @profile.profile_pic.variant( resize: '200x200!' ) ), class: 'user_icon' %>
    <% end %>
  </p>

  <p>
    <%= f.label :bio %>
    <br><%= f.text_area :bio %>
  </p>

  <p>
    <%= f.label :location %>
    <br><%= f.text_field :location %>
  </p>
  <p>
    <%= f.label :postcode %>
    <br><%= f.text_field :postcode, class: 'textshort' %>
  </p>

  <%
    remove_link_button = %Q{<input type="button" class="no-border" value="&#10134;" alt="#{t( '.remove_link' )}" title="#{t( '.remove_link' )}" onclick="this.parentNode.remove()">}
    add_link_button    = %Q{<input type="button" id="add-link-button" class="no-border" value="&#10133;" alt="#{t( '.add_link' )}" title="#{t( '.add_link' )}" onclick="add_link_inputs()">}

    @new_link_form = %Q{
      <p>
        #{text_field_tag 'profile[new_link_name][]', nil, placeholder: t( '.name' )}
        #{text_field_tag 'profile[new_link_url][]',  nil, placeholder: t( '.url'  ), class: 'long'}
        #{remove_link_button}
        #{add_link_button}
      </p>
    }
  %>

  <span id="links">
  <%= label_tag t( '.links' ) %>
  <%= f.fields_for :links do |fields| %>
  <p>
    <%= fields.text_field :name, placeholder: t( '.name' ) %>
    <%= fields.text_field :url,  placeholder: t( '.url'  ), class: 'long' %>
    <input type="button" class="no-border" value="&#10134;" alt="#{t( '.remove_link' )}" title="#{t( '.remove_link' )}" onclick="remove_link(<%= fields.index %>, this.parentNode)">
    <%= fields.hidden_field :_destroy %>
    <% if fields.index == @profile.links.size - 1 %>
    <%= add_link_button.html_safe %>
    <% end %>
  </p>
  <% end %>
  <% if @profile.links.empty? %>
  <%= @new_link_form.html_safe %>
  <% end %>
  </span>

  <p class="top-margin">
    <%= submit_tag t( 'update' ), class: 'button' %>
  </p>
<% end %>

<script>
  function add_link_inputs() {
    document.getElementById( 'add-link-button' ).remove()
    document.getElementById( 'links' ).insertAdjacentHTML(
      'beforeend', '<%= @new_link_form.gsub( "\n", "\\\n" ).html_safe %>'
    );
  }

  function remove_link( row_id, row ) {
    destroy = document.getElementById( 'profile_links_attributes_' + row_id + '__destroy' )
    links   = document.getElementById( 'links' )

    links.appendChild( destroy )
    destroy.value = 'true'

    row.remove()
  }
</script>