<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Populating manual</title>

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
    <style>
        figure {
            padding: 1em;
            background: rgb(218, 241, 255);
            border-radius: 3px;
        }

        body {
            padding-bottom: 3em;
        }
    </style>
  </head>

  <body>
    <div class="container">
        {{#each items}}
            <div class="row">
                {{#if this.is_comment}}
                    <div class="col-md-12">
                        {{{this.content}}}
                    </div>
                {{/if}}
                {{#if this.is_step}}
                    {{#each this.steps}}
                    <div class="col-lg-6">
                        <figure class="figure">
                            <img src="{{this.img}}" class="figure-img img-fluid rounded">
                            <figcaption class="figure-caption">{{{this.comment}}}</figcaption>
                        </figure>
                    </div>
                    {{/each}}
                {{/if}}
            </div>
        {{/each}}
    </div>
    <scrip src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js">
  </body>
</html>
