goals {

  message "Our app is nearly done! But the main topics listing page is still pretty busy, and does not look like a list at all."

  message "Let's clean up the topics list page by doing the following:"

  goal "Remove the 'Show this topic' link"
  goal "Turn it into a real list"
}

steps {
  step "Remove the 'Show this topic' links" do
    message "Open `app/views/topics/index.html.erb` and remove these two lines:"
    source_code :erb, <<-ERB
    <p>
      <%= link_to "Show this topic", topic %>
    </p>
    ERB
  end

  step "Turn it into a real list" do
    message "Instead of a sequence of `<div>`s create a real list. Open `app/views/topics/index.html.erb` and replace everything inside from `<div id=\"topics\">` to the last `</div>`:"
    source_code :erb, <<-ERB
      <ul id="topics">
        <% @topics.each do |topic| %>
          <li id="<%= dom_id topic %>">
              <%= link_to topic.title, topic %>
              <%= pluralize(topic.votes.count, "vote") %>
              <%= button_to '+1', upvote_topic_path(topic), method: :post %>
          </li>
        <% end %>
      </ul>
    ERB

    message "Reload the page in the browser to see the changes. You should see a list now. But the voting-buttons still appear on a line by themselves"
  end

  step "Add some CSS to get the button in line" do
    message "Create a new file `app/assets/stylesheets/topics.css` and save the following code to it:"
    source_code :css, <<-ERB
      ul#topics form {
        display: inline;
      }
    ERB
  end

  step "Confirm your changes" do
    message <<-MARKDOWN
      Now save your file and try reloading in your browser to see the changes.

      The topic listing page should now look something like this:

      ![](img/topic_list_as_list.png)

    MARKDOWN
  end
}


explanation {
  message <<-MARKDOWN
  * We removed the "Show this topic" link because we have the title as a link to the same page now
  * We used the HTML Tags `<ul>` and `<li>` to display a list
  MARKDOWN
}

commitnow do
  message "find a good commit message and commit your changes"
end

next_step "credits_and_next_steps"