<div id="bug_modal" class="modal modal-fixed-footer">
  <div class="modal-content">
    <h4><i class="material-icons"
        style="font-size: 50px; padding-right: 10px; vertical-align: middle">bug_report</i><span>Report an Issue</span>
    </h4>
    <p class="detail-node">
      Looks like you ran into a problem that you want to report to the developer(s). Getting a lot of detail about what
      you ran into can really help them figure things out. To make
      gathering that easy for you and the developer, follow these instructions:
    </p>
    <ul class="browser-default">
      <li>
        Click
        <a target="_blank"
          href="https://github.com/sabeechen/hassio-google-drive-backup/issues/new?title=Please%20add%20a%20title&body=Copy%20the%20info%20from%20the%20previous%20page%20here"><i
            style="vertical-align: middle" class="material-icons tiny">open_in_new</i> Open Github</a>
        to open a new issue on Github and paste the text you copied there. You can click "Preview" to make sure it looks
        right.
      </li>
      <li>Before submitting the issue, add in any information you think might help. Consider including what you were
        doing that caused the error, a screenshot, etc.</li>
      <li>
        Click "Submit new issue" on Github to post the issue. The developer will get back to you as fast as he can, but
        keep in mind that he maintains this project in his free
        time.
      </li>
    </ul>
    <p>Here is a preview of the information you'll be providing:</p>
    <ul class="tabs" id="bug_report_tabs">
      <li class="tab col s3"><a class="active" href="#bug_preview">Preview</a></li>
      <li class="tab col s3"><a href="#bug_markdown">Markdown</a></li>
    </ul>
    <div style="max-height: 200px;">
      <div id="bug_preview" class="col s12">
        <div id="bug_preview_display" class="highlight-border" style="overflow-y: scroll; overflow-x: scroll; max-height: 500px;"></div>
      </div>
      <div id="bug_markdown" class="col s12">
        <div class="highlight-border">
          <textarea id="bug_markdown_display" style="overflow-x: scroll; height: 500px; border: 0;"></textarea>
        </div>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <a href="#!" onclick="doBugDetailCopy()" class="btn-flat"><i class="material-icons" >content_copy</i>Copy Details</a>
    <a target="_blank"
      href="https://github.com/sabeechen/hassio-google-drive-backup/issues/new?title=Please%20add%20a%20title&body=Copy%20the%20info%20from%20the%20previous%20page%20here"
      class="btn-flat"><i class="material-icons">open_in_new</i>Open Github</a>
    <a href="#!" class="modal-close btn-flat"><i class="material-icons">close</i>Close</a>
  </div>
</div>
