scinote-web/app/views/shared/_marvinjs_modal.html.erb

<% if MarvinJsService.enabled? %>
  <div id="MarvinJsModal"
       class="modal modal-marvin-js"
       role="dialog"
       aria-labelledby="marvinJsModal"
       aria-hidden="true"
       data-backdrop="static"
       data-keyboard="false">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <span class="file-name">
            <div class="sci-input-container ">
              <%= text_field_tag :sketch_name, '', placeholder: t('marvinjs.structure_placeholder'), class: 'sci-input-field' %>
            </div>
          </span>
          <button class="file-save-link btn btn-light">
            <i class="fas fa-save"></i>
            <%= t('SaveClose')%>
          </button>
          <button class="preview-close btn btn-light icon-btn" data-dismiss="modal">
            <i class="fas fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <div id="marvinjs-editor" data-marvinjs-mode="<%= ENV['MARVINJS_API_KEY'] ? 'remote' : 'local' %>">
            <% if ENV['MARVINJS_API_KEY'] %>
              <div id="marvinjs-sketch" style="width: 600px; height: 480px"></div>
            <% elsif ENV['MARVINJS_URL'] %>
              <iframe id="marvinjs-sketch" src="<%= MarvinJsService.url %>" frameBorder="0"></iframe>
            <% end %>
          </div>
        </div>
      </div>
    </div>
  </div>
<% else %>
  <div class="modal modal-promo-marvin-js" id="MarvinJsPromoModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">
            MarvinJS Promo Title
          </h4>
        </div>
        <div class="modal-body">
          MarvinJS Promo Description
        </div>
      </div>
    </div>
  </div>
<% end %>