<%= render 'posts/markdown_script' %>

<div class="grid step-0">
  <div class="grid--cell codidactyl">
    <img src="/assets/codidactyl.png" alt="Codidactyl">
  </div>
  <div class="grid--cell is-flexible">
    <div class="widget">
      <div class="widget--body">
        <p>Hey! Your question has been posted. Isn't that exciting?</p>
        <p>Now you have to wait for answers to come in. If other users have questions regarding your post, they can ask
          them in comments.</p>
      </div>
    </div>
  </div>
</div>

<hr>

<div class="grid">
  <div class="grid--cell is-8">
    <div class="post">
      <h1
        class="post--title has-border-top-width-4 has-border-top-style-solid has-border-color-primary-400 has-padding-2">
        How do I teach my dragon not to chase my sheep around?
        <span class="badge is-tag is-filled is-muted"><i class="fas fa-question"></i> <span>Question</span></span>
      </h1>

      <div class="post--container grid is-nowrap">
        <div class="grid--cell">
          <div class="post--votes has-text-align-center" title="0.5">
            <button class="tour-vote-button button is-icon-only-button" aria-label="Upvote">
              <svg width="2em" height="1.33em" viewbox="0 0 100 50">
                <path d="M50,0 L100,50 L0,50 Z" fill="currentColor" />
              </svg>
            </button>
            <div class="score has-font-size-subheading js-upvote-count">
              +0
            </div>
            <div class="score has-font-size-subheading js-downvote-count">
              &minus;0
            </div>
            <button class="tour-vote-button button is-icon-only-button " aria-label="Downvote">
              <svg width="2em" height="1.33em" viewbox="0 0 100 50">
                <path d="M0,0 L100,0 L50,50 Z" fill="currentColor" />
              </svg>
            </button>
          </div>
        </div>

        <div class="grid--cell is-flexible has-padding-2">
          <div class="post--body">
            <p>My dragon Martha has constantly been chasing my sheep around, and I'd like to get her to stop this
              behavior.</p>
            <p>Martha is a Hot Red Firebreather, and is five and a half feet long at about a year old (still pretty
              young, since dragons are only fully grown at three). I've had her for about three months now. She's
              generally very well-behaved - never breathing fire inside the house and not fighting with my neighbor's
              old Sapphire Blue Waterspouter. However, every time she sees my (solitary) sheep, she chases him around
              and bothers him, and it's really not good for the sheep.</p>
            <p>I've asked around and done some research, and the folks at the Dwarven Library told me that I could paint
              my sheep blue to prevent this from happening. However, I'm not looking to do anything to the sheep - just
              for training the dragon.</p>
            <p>I do not want to use any training methods that involve pain or restricting the dragon in any way, and I'm
              not looking to do anything to the sheep. I'm pretty experienced in training dragons, but I've never had to
              deal with this situation before.</p>

            <div class="post--meta has-margin-bottom-4">
              <div class="post--author has-float-right has-color-tertiary">
                <div title="2020-07-10T09:32:35Z">just now</div>
                <div>
                  <img alt="user avatar" src="<%= current_user.nil? ? avatar_url(User.find(-1)) : avatar_url(current_user) %>" height="32" width="32"
                    class="has-float-left" />
                  <div class="has-padding-1 has-float-left">
                    <a href="#"><%= current_user&.username || "user31415" %></a> <span
                      class="badge is-user-trust-level is-muted"><%= current_user&.reputation || 1 %></span>
                  </div>
                  <div class="has-clear-clear"></div>
                </div>
              </div>
              <div class="post--tags has-padding-2">
                <a class="badge is-tag   " href="#">hot-red-firebreather</a>
                <a class="badge is-tag   " href="#">training</a>
                <a class="badge is-tag   " href="#">behavior</a>
              </div>
            </div>
            <div class="has-clear-clear"></div>


            <div class="post--actions">
              <div class="tools">
                <a class="tools--item" href="#">
                  <i class="fa fa-link"></i>
                  Permalink
                </a> <a class="tools--item" href="#">
                  <i class="fa fa-history"></i>
                  History
                </a> <a class="tools--item" href="#">
                  <i class="fa fa-pencil-alt"></i>
                  Edit
                </a> <a href="#" class="flag-dialog-link tools--item">
                  <i class="fa fa-flag"></i>
                  Flag
                </a>
              </div>
            </div>

            <div class="post--comments has-padding-4">
              <h4 class="has-margin-0">
                0 comments
                <span class="has-color-tertiary-500"></span>
              </h4>
              <div class="post--comments-container">
              </div>

              <div class="post--comments-links has-margin-top-1">
                <a href="#!">Add a comment</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <h2 class="js-answer-counter">0 answers</h2>

    <div class="post hide js-good-answer" id="good-answer">
      <div class="post--container grid is-nowrap">
        <div class="grid--cell">
          <div class="post--votes has-text-align-center" title="0.5">
            <button class="tour-vote-button button is-icon-only-button" onclick="tour.firstAnswerUpvote(this);" aria-label="Upvote">
              <svg width="2em" height="1.33em" viewbox="0 0 100 50">
                <path d="M50,0 L100,50 L0,50 Z" fill="currentColor" />
              </svg>
            </button>
            <div class="score has-font-size-subheading js-upvote-count">
              +0
            </div>
            <div class="score has-font-size-subheading js-downvote-count">
              &minus;0
            </div>
            <button class="tour-vote-button button is-icon-only-button " aria-label="Downvote">
              <svg width="2em" height="1.33em" viewbox="0 0 100 50">
                <path d="M0,0 L100,0 L50,50 Z" fill="currentColor" />
              </svg>
            </button>
          </div>
        </div>

        <div class="grid--cell is-flexible has-padding-2">
          <div class="post--body">
            <p><strong>Music.</strong></p>
            <p>It is well known, that dragons are quite sensitive to music. If you play the right music, it can calm your dragon down and it won't be chasing your sheep around anymore.</p>
            <p>As you likely don't want Martha to sleep all day, you'll need to play the music only around the sheep. You could put a music player on their back for example.</p>
            <p>The music won't affect the sheep much if at all, because they are less sensitive to it than dragons. However, you must <em>not play aggressive music</em>, because it can also make the dragon more aggressive, which is probably the last you want.</p>
            <p>I have a dragon-calming playlist, you might want to <a href="#">check it out</a>.</p>

            <div class="post--meta has-margin-bottom-4">
              <div class="post--author has-float-right has-color-tertiary">
                <div title="2020-07-10T09:32:35Z">just now</div>
                <div>
                  <img alt="user avatar" src="/assets/tour-clippy.png" height="32" width="32"
                    class="has-float-left" />
                  <div class="has-padding-1 has-float-left">
                    <a href="#">paper_clip</a> <span
                      class="badge is-user-trust-level is-muted">5013</span>
                  </div>
                  <div class="has-clear-clear"></div>
                </div>
              </div>
            </div>
            <div class="has-clear-clear"></div>


            <div class="post--actions">
              <div class="tools">
                <a class="tools--item" href="#">
                  <i class="fa fa-link"></i>
                  Permalink
                </a> <a class="tools--item" href="#">
                  <i class="fa fa-history"></i>
                  History
                </a> <a href="#" class="flag-dialog-link tools--item">
                  <i class="fa fa-flag"></i>
                  Flag
                </a>
              </div>
            </div>

            <div class="post--comments has-padding-4">
              <h4 class="has-margin-0">
                0 comments
                <span class="has-color-tertiary-500"></span>
              </h4>
              <div class="post--comments-container">
              </div>

              <div class="post--comments-links has-margin-top-1">
                <a href="#!">Add a comment</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="post hide js-bad-answer" id="bad-answer">
      <div class="post--container grid is-nowrap">
        <div class="grid--cell">
          <div class="post--votes has-text-align-center" title="0.5">
            <button class="tour-vote-button button is-icon-only-button" aria-label="Upvote">
              <svg width="2em" height="1.33em" viewbox="0 0 100 50">
                <path d="M50,0 L100,50 L0,50 Z" fill="currentColor" />
              </svg>
            </button>
            <div class="score has-font-size-subheading js-upvote-count">
              +0
            </div>
            <div class="score has-font-size-subheading js-downvote-count">
              &minus;0
            </div>
            <button class="tour-vote-button button is-icon-only-button " aria-label="Downvote">
              <svg width="2em" height="1.33em" viewbox="0 0 100 50">
                <path d="M0,0 L100,0 L50,50 Z" fill="currentColor" />
              </svg>
            </button>
          </div>
        </div>

        <div class="grid--cell is-flexible has-padding-2">
          <div class="post--body">
            <p>Well... that's your fault of keeping both a dragon and sheep. How stupid...</p>

            <div class="post--meta has-margin-bottom-4">
              <div class="post--author has-float-right has-color-tertiary">
                <div title="2020-07-10T09:32:35Z">just now</div>
                <div>
                  <img alt="user avatar" src="/assets/tour-evil.png" height="32" width="32"
                    class="has-float-left" />
                  <div class="has-padding-1 has-float-left">
                    <a href="#">nas_tea</a> <span
                      class="badge is-user-trust-level is-muted">15</span>
                  </div>
                  <div class="has-clear-clear"></div>
                </div>
              </div>
            </div>
            <div class="has-clear-clear"></div>


            <div class="post--actions">
              <div class="tools">
                <a class="tools--item" href="#">
                  <i class="fa fa-link"></i>
                  Permalink
                </a> <a class="tools--item" href="#">
                  <i class="fa fa-history"></i>
                  History
                </a> <a href="#!" class="flag-dialog-link tools--item">
                  <i class="fa fa-flag"></i>
                  Flag
                </a>
              </div>
            </div>


            <div class="post--action-dialog js-flag-box">
              <div class="widget">
                <div class="widget--body">
                  <label class="form-element" for="flag-bad-post">
                    Why does this post require moderator attention?
                  </label>
                  <input class="form-element js-flag-comment" id="flag-bad-post>
                </div>
                <div class="widget--footer">
                  <button class="js-tour-flag-link button is-filled is-muted" onclick="tour.secondAnswerFlag(this);">
                    Flag for moderator attention
                  </button>
                </div>
              </div>
            </div>

            <div class="tour-flag-success hide">
              <div class="notice is-success">
                <button class="button is-close-button" data-dismiss=".tour-flag-success" data-dismiss-soft>&times;</button>
                <p>Thanks for your report. We'll look into it.</p>
              </div>
            </div>

            <div class="post--comments has-padding-4">
              <h4 class="has-margin-0">
                0 comments
                <span class="has-color-tertiary-500"></span>
              </h4>
              <div class="post--comments-container">
              </div>

              <div class="post--comments-links has-margin-top-1">
                <a href="#">Add a comment</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="grid--cell is-4">
    <div class="codidactyl-hints codidactyl-sticky">
      <div class="widget step-1">
        <div class="widget--header">
          <img src="/assets/codidactyl.png" alt="" class="codidactyl-small">
          Codidactyl's Hints
        </div>
        <div class="widget--body">
          <p>This is your post. We are currently waiting for other people to see and answer it.</p>
        </div>
      </div>

      <div class="widget step-2 hide">
        <div class="widget--header">
          <img src="/assets/codidactyl.png" alt="" class="codidactyl-small">
          Codidactyl's Hints
        </div>
        <div class="widget--body">
          <p>Ooh. Nice. There is an answer to your question.</p>
          <p>Read through it and consider whether it helps you solve your problem. Try out the solution if it's practical.</p>
        </div>
        <div class="widget--footer">
            <button class="button is-filled" data-step-from=".step-2" data-step-to=".step-3">Next</button>
        </div>
      </div>

      <div class="widget step-3 hide">
        <div class="widget--header">
          <img src="/assets/codidactyl.png" alt="" class="codidactyl-small">
          Codidactyl's Hints
        </div>
        <div class="widget--body">
          <p>This answer looks helpful.</p>
          <p>To show other users reading this answer, that you found it helpful (and also as a way to say "thanks" to the answerer), you can <em>upvote</em> it.</p>
          <p>Voting also helps good content be more visible. Good answers are promoted to the top, while bad ones sink to the bottom. Please help curate the community by voting responsibly.</p>
          <p>Do so by clicking the <svg class="h-c-tertiary-400" width="2em" height="1.33em" viewbox="0 0 100 50">
              <path d="M50,0 L100,50 L0,50 Z" fill="currentColor" />
            </svg> icon next to the post.</p>
        </div>
        <div class="widget--footer">
            <button class="button"  data-step-from=".step-2" data-step-to=".step-3">Back</button>
        </div>
      </div>

      <div class="widget step-4 hide">
        <div class="widget--header">
          <img src="/assets/codidactyl.png" alt="" class="codidactyl-small">
          Codidactyl's Hints
        </div>
        <div class="widget--body">
          <p>Thanks.</p>
          <p>Let's wait for other answers, which might produce different solutions.</p>
        </div>
      </div>

      <div class="widget step-5 hide">
        <div class="widget--header">
          <img src="/assets/codidactyl.png" alt="" class="codidactyl-small">
          Codidactyl's Hints
        </div>
        <div class="widget--body">
          <p>Oh. A second answer.</p>
          <p>Unfortunately, it doesn't seem to be nice. It isn't helpful to the question and quite snarky.</p>
          <p>We expect users to stay civil and to follow our minimal <a href="/policy/code-of-conduct">code of conduct</a>.</p>
          <p>This answer should therefore be deleted. <em>Flag</em> it, so that one of our moderators can see and handle it.</p>
        </div>
      </div>

      <div class="widget step-6 hide">
        <div class="widget--header">
          <img src="/assets/codidactyl.png" alt="" class="codidactyl-small">
          Codidactyl's Hints
        </div>
        <div class="widget--body">
          <p>Thanks for flagging it.</p>
          <p>A moderator will look at it and will likely remove the answer.</p>
          <p>Flagging is important to help maintain the site. If you see something rude, flag it. Inappropriate content will get deleted, but somebody has to know about it first -- so flag to let moderators know. If you see anything else that doesn't look quite right, flag it and let us know about it.</p>
        </div>
        <div class="widget--footer">
          <a href="/tour/more" class="button is-filled">Find out more</a>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="js-tour-trigger-qa-page hide"></div>
