exercism/website

- content_for :meta_title, "#{sanitize(@solution.user.handle)}'s solution for #{@exercise.title} in #{@track.title} on Exercism".html_safe
- content_for :meta_description, "See how @#{sanitize(@solution.user.handle)} solved #{@exercise.title} in #{@track.title} and get inspired for how you could solve it too! Exercism is 100% free and a great way to level-up your programming skills in over 65 languages."
- content_for :meta_image, Exercism::Routes.published_solution_url(@solution, format: :jpg)
- content_for :canonical_url, Exercism::Routes.published_solution_url(@solution)
- require_stylesheet "track"

#page-community-solution
  .c-exercise-header
    .c-track-breadcrumbs
      .lg-container.container
        = link_to tracks_path do
          = graphical_icon 'tracks', hex: true
          .span Tracks
        .seperator /
        = link_to @track do
          = track_icon @track
          .span= @track.title
        .seperator /
        = link_to "Exercises", track_exercises_path(@track)
        .seperator /
        = link_to @exercise.title, track_exercise_path(@track, @exercise)
        .seperator /
        = link_to "Community Solutions", track_exercise_solutions_path(@track, @exercise)
        .seperator /
        .exercise-title.flex
          - if @own_solution
            Your solution
          - else
            #{@author.handle}'s solution

    .content.lg-container.flex.flex-col.lg:flex-row.lg:items-center
      = track_icon @track
      .flex.items-start.sm:items-center
        .avatar.mr-16.sm:mr-32
          - if @author.profile
            = link_to avatar(@author), profile_path(@author)
          - else
            = avatar(@author)

        %h1
          .name
            - if @own_solution
              Your solution
            - elsif @author.profile
              = link_to profile_path(@author), class: 'flex' do
                #{@author.handle}'s solution
            - else
              #{@author.handle}'s solution
            = render ViewComponents::Reputation.new(@author.formatted_reputation, size: :small, flashy: true)
          .to
            to
            = link_to @exercise.title, track_exercise_path(@track, @exercise)
            in
            = link_to @track.title, @track

      .buttons.lg:ml-auto.mt-24.lg:mt-0
        = render ViewComponents::CommunitySolutions::ShareSolutionButton.new(@solution)

        = render ReactComponents::CommunitySolutions::StarButton.new(@solution)

        - if @solution.allow_comments?
          = link_to "#comments", "data-turbolinks": "false", class: 'comments-button btn-enhanced btn-s' do
            = icon "comment", "Number of comment"
            %span= @solution.num_comments

  %article.lg-container.container.flex.flex-col.lg:flex-row.items-stretch
    .lhs.mb-40.lg:mb-0.lg:w-arbitary
      .iteration-section
        = render ReactComponents::Common::SolutionView.new(@solution)

      - if @mentor_discussions.present?
        .mentoring
          .inner
            .c-faces.--static
              - @mentor_discussions.each do |discussion|
                .face= avatar discussion.mentor
            .info
              .mentors
                Mentored by 
                %strong= @mentor_discussions.map { |d| render(ViewComponents::HandleWithFlair.new(d.mentor.handle, d.mentor.flair)) }.map(&:to_s).to_sentence.html_safe


              = link_to doc_path(:using, 'feedback'), class: 'more' do
                = graphical_icon "info-circle", css_class: 'filter-textColor6'
                What is this?

            = render ViewComponents::Reputation.new("+5", size: :small, flashy: true)

      %a{ name: "comments" }
      = render ReactComponents::CommunitySolutions::CommentsList.new(@solution)

    .rhs.lg:ml-48
      - if @exercise_representation&.oldest_solution && @exercise_representation&.prestigious_solution
        .border-b-1.border-borderColor7.mb-24.pb-24
          %h2.flex.items-center.mb-8.text-h4
            = graphical_icon "stats", css_class: 'mr-16 h-[24px] w-[24px] filter-textColor2'
            About this solution
          %p.text-p-base.mb-12 We automatically group similar solutions and generate statistics about how popular they are.
          .py-16.shadow-base.rounded-8.bg-backgroundColorA.text-center.grid.grid-cols-3.leading-150
            .flex.flex-col
              .text-18.font-medium.mb-8.text-textColor2= number_with_delimiter(@exercise_representation.num_published_solutions)
              .text-15= "Submission".pluralize(@exercise_representation.num_published_solutions)

            .flex.flex-col
              .text-18.font-medium.mb-8.text-textColor2 #{time_ago_in_words(@exercise_representation.first_submitted_at, short: true)} ago
              .text-15 First submitted

            .flex.flex-col
              .text-18.font-medium.text-textColor2.mb-8.flex.items-center.justify-center
                = icon "reputation", "Reputation", css_class: "w-[16px] h-[16px] mr-6 filter-textColor2"
                = number_with_delimiter(@exercise_representation.max_reputation)
              .text-15 Max track rep

      - if @approach
        .border-b-1.border-borderColor7.mb-24.pb-24
          %h2.flex.items-center.mb-8.text-h4
            = graphical_icon "dig-deeper", css_class: 'mr-16 h-[24px] w-[24px] filter-textColor2'
            This solution's approach
          %p.text-p-base.mb-12 Explore the pros and cons of this approach in our community-written deep dive…

          = link_to track_exercise_approach_path(@track, @exercise, @approach), class: "block bg-backgroundColorA shadow-base rounded-8 px-20 py-16 mb-16" do
            %h5.text-h5.mb-2= @approach.title
            %p.text-p-base.text-textColor6.mb-6= @approach.blurb
            .flex.items-center
              = graphical_icon 'mentoring-soft-skills', css_class: 'w-[24px] h-[24px] mr-6 filter-textColor7'
              %p.text-p-small.text-textColor6 Used by #{@approach.num_solutions} people.

      .about
        %h2
          About the
          = track_icon @track
          = @track.title
          Exercise
        = render ReactComponents::Common::ExerciseWidget.new(@exercise, @user_track, render_track: false, render_blurb: false)

      .other-solutions
        %h2
          Other solutions to
          = @exercise.title
          .light in
          = track_icon @track
          .track-title= @track.title

        - @other_solutions.each do |solution|
          = render ReactComponents::Common::CommunitySolution.new(solution, context: :exercise)

        = render ViewComponents::ProminentLink.new("Explore other solutions to this exercise", track_exercise_solutions_path(@track, @exercise))