        <header>
            {% include 'headline.html' %}
            <div class="job-details">
                <div>
                    <div class="table">
                      <p><span>{{ _('COLOR') }}:</span><span data-field-name="color-{{ color_block.color.hex_digits }}" contenteditable="true" data-placeholder="{{ _('Enter thread name...') }}">{{ color_block.color.thread_name }}</span></p>
                    </div>
                </div>
                <div>
                    <div class="table time-cld">
                      <p><span>{{ _('Estimated time') }}:</span></p>
                      <p><span class="cld-estimated-time"></span></p>
                  </div>
                </div>
            </div>
        </header>
        <main>
            <figure class="inksimulation" data-field-name="client-detail-transform-block{{ loop.index0 }}" title="{{ _('Ctrl + Scroll to Zoom') }}">
                {{color_block.svg_preview|replace("<li>", "")|replace("</li>", "")|safe}}
                {% with %}
                  {% set loop_index=loop.index0 %}
                  {% include 'ui_svg_action_buttons.html' with context %}
                {% endwith %}
            </figure>
            <div class="color-palette detailed">
                {% include 'color_swatch.html' %}
            </div>
        </main>

      {% include 'footer.html' %}
