<div class="row">
  <div id="<%= dom_id @recipe %>" class="col">
    <p>
      <%= image_tag @recipe.photo_url, class: "img-fluid" %>
    </p>

    <h1><%= @recipe.name %></h1>

    <p>
      <strong>Category:</strong>
      <%= @recipe.category.name %>
    </p>

    <%= simple_format @recipe.description %>

    <div class="d-inline-flex gap-1 mt-3 mb-3">
      <% if @recipe.created_by?(current_user) %>
        <%= link_to "Edit", edit_recipe_path(@recipe), class: "btn btn-primary" %>
        <%= button_to "Delete", @recipe, method: :delete, class: "btn btn-light" %>
      <% end %>

      <div id="favorite_button">
        <%= render "favorite_button", recipe: @recipe %>
      </div>
    </div>

    <h2>Ingredients</h2>

    <%=
      Commonmarker.to_html(@recipe.ingredients, options:{
        parse: { smart: true },
        render: { hardbreaks: false}
      }).html_safe
    %>

    <h2>Instructions</h2>

    <%=
      Commonmarker.to_html(@recipe.instructions, options:{
        parse: { smart: true },
        render: { hardbreaks: false}
      }).html_safe
    %>

    <p>
      Shared by
      <%= render "application/avatar", user: @recipe.user %>
      <%= @recipe.user.nickname %>
      <% if @recipe.user.new_to_site? %>
        <span class="badge rounded-pill bg-success">New user</span>
      <% end %>
      (<%= @recipe.created_at %>)
    </p>
  </div>

  <div class="col-sm-auto" id="comments">
    <h2>Comments</h2>

    <% if @recipe.comments.any? %>
      <%= render @recipe.comments %>
    <% end %>

    <% if signed_in? %>
      <%= render "comments/form", comment: @recipe.comments.build %>
    <% end %>
  </div>
</div>
