<commit_before>--- 
+++ 
@@ -1,4 +1,4 @@
-{% extends 'app_manager/v1/managed_app.html'%}
+{% extends 'app_manager/v2/managed_app.html'%}
 {% load xforms_extras %}
 {% load hq_shared_tags %}
 {% load i18n %}
@@ -14,6 +14,15 @@
     {% endif %}
 {% endblock %}
 
+{% block stylesheets %}{{ block.super }}
+  <style type="text/css">
+    .hq-container {
+      padding-bottom: 0;
+      margin-bottom: 0;
+    }
+  </style>
+{% endblock %}
+
 {% block js %}{{ block.super }}
     <script src="{% static 'moment/moment.js' %}"></script>
     <script src="{% static 'requirejs/require.js' %}"></script>
@@ -28,6 +37,16 @@
             plugins: {{ plugins|JSON }},
             features: {{ features|JSON }},
             core: {
+                defaultHelpTextTemplateId:
+                  {% if form.get_action_type == 'open' %}
+                      '#fd-hq-helptext-registration'
+                  {% elif form.get_action_type == 'close' %}
+                      '#fd-hq-helptext-close'
+                  {% elif form.get_action_type == 'update' %}
+                      '#fd-hq-helptext-followup'
+                  {% else %}
+                      '#fd-hq-helptext-survey'
+                  {% endif %},
                 dataSourcesEndpoint: '{% url "get_form_data_schema" domain=domain form_unique_id=form.get_unique_id %}',
                 dataSources: [
                     {% comment %} DEPRECATED. Use dataSourcesEndpoint {% endcomment %}
@@ -39,6 +58,22 @@
                 ],
                 form: {{ form.source|JSON }},
                 formId: '{{ form.get_unique_id }}',
+                formIconClass:
+                  {% if form.get_action_type == 'open' %}
+                      "fcc fcc-app-createform"
+                  {% elif form.get_action_type == 'close' %}
+                      "fcc fcc-app-completeform"
+                  {% elif form.get_action_type == 'update' %}
+                      "fcc fcc-app-updateform"
+                  {% else %}
+                      "fa fa-file-o"
+                  {% endif %},
+                formLoadingCallback: function () {
+                  $('#formdesigner').addClass('loading');
+                },
+                formLoadedCallback: function () {
+                  $('#formdesigner').removeClass('loading');
+                },
                 formName: "{{ form.name|trans:app.langs|escapejs }}",
                 saveType: 'patch',
                 saveUrl: '{% url "edit_form_attr" domain app.id form.get_unique_id "xform" %}',
@@ -56,6 +91,7 @@
                 onFormSave: function (data) {
                     var app_manager = hqImport('app_manager/js/app_manager.js')
                     app_manager.updateDOM(data.update);
+                    $('.js-preview-toggle').removeAttr('disabled');
                     {% if request.couch_user.days_since_created == 0 %}
                         analytics.workflow('Saved the Form Builder within first 24 hours');
                     {% endif %}
@@ -162,11 +198,10 @@
                 'jquery.vellum': 'main'
             }
         });
-        
+
         require(["jquery", "jquery.vellum", "moment"], function ($) {
             $(function () {
                 $("#edit").hide();
-                $('#hq-footer').hide();
 
                 $('#formdesigner').vellum(VELLUM_OPTIONS);
 
@@ -183,14 +218,93 @@
             });
         });
         analytics.workflow('Entered the Form Builder');
-
-    </script>
+        $(function () {
+            var previewApp = hqImport('app_manager/js/preview_app.js');
+
+            {% if form.uses_cases %}
+            // todo make this a more broadly used util, perhaps? actually add buttons to formplayer?
+            var _prependTemplateToSelector = function (selector, layout, attempts, callback) {
+                attempts = attempts || 0;
+                if ($(selector).length) {
+                    var $toggleParent = $(selector);
+                    $toggleParent.prepend(layout);
+                    callback();
+                } else if (attempts <= 30) {
+                    // give up appending element after waiting 30 seconds to load
+                    setTimeout(function () {
+                        _prependTemplateToSelector(selector, layout, attempts++, callback);
+                    }, 1000);
+                }
+            };
+            _prependTemplateToSelector(
+                '.fd-form-actions',
+                $('#js-fd-manage-case').html(),
+                0,
+                function () {
+                    previewApp.appendToggleTo('.fd-form-actions', $('#js-fd-app-preview-btn-template').html());
+                }
+            );
+            {% else %}
+                previewApp.appendToggleTo('.fd-form-actions', $('#js-fd-app-preview-btn-template').html());
+            {% endif %}
+
+        });
+
+    </script>
+
+    {% if can_preview_form %}
+    <script type="text/html" id="js-fd-app-preview-btn-template">
+        {% include 'app_manager/v2/partials/app_preview_toggle.html' %}
+    </script>
+    {% endif %}
+
+    <script type="text/html" id="js-fd-manage-case">
+      <div class="btn-group pull-right">
+        <a class="btn btn-manage" href="{% url "view_form" domain app.id module.id form.id %}">
+          <i class="fa fa-cog"></i> {% trans 'Manage Case' %}
+        </a>
+      </div>
+    </script>
+
+    <script type="text/html" id="fd-hq-helptext-registration">
+        <h4>{% blocktrans %}This is a <i class="fcc fcc-app-createform"></i> Registration Form.{% endblocktrans %}</h4>
+        <p>
+          {% blocktrans %}
+            Users will fill it out when they need to <strong>add</strong> a new item to the application.
+          {% endblocktrans %}
+        </p>
+    </script>
+
+    <script type="text/html" id="fd-hq-helptext-close">
+        close form
+    </script>
+
+    <script type="text/html" id="fd-hq-helptext-followup">
+        <h4>{% blocktrans %}This is a <i class="fcc fcc-app-updateform"></i> Followup Form.{% endblocktrans %}</h4>
+        <p>
+          {% blocktrans %}
+            Users will fill it out when they need to <strong>update</strong> an item that has already been added to the application.
+          {% endblocktrans %}
+        </p>
+    </script>
+
+    <script type="text/html" id="fd-hq-helptext-survey">
+        <h4>{% blocktrans %}This is a <i class="fa fa-file-o"></i> Survey.{% endblocktrans %}</h4>
+        <p>
+          {% blocktrans %}
+          It's useful for asking questions once, for information that you won't need to follow up on later.
+          {% endblocktrans %}
+        </p>
+    </script>
+
 {% endblock %}
 
 {% block title %}{{ form.name|clean_trans:langs }}{% endblock %}
 
 {% block form-view %}
-    <div id="formdesigner" class="clearfix"></div>
+    <div id="formdesigner" class="clearfix app-manager-v2 loading"></div>
 {% endblock %}
 
 {% block column_style %}hq-flush-content{% endblock %}
+
+{% block footer %}{% endblock %}<commit_msg>update diffs<commit_after>--- 
+++ 
@@ -1,4 +1,4 @@
-{% extends 'app_manager/v1/managed_app.html'%}
+{% extends 'app_manager/v2/managed_app.html'%}
 {% load xforms_extras %}
 {% load hq_shared_tags %}
 {% load i18n %}
@@ -14,11 +14,21 @@
     {% endif %}
 {% endblock %}
 
+{% block stylesheets %}{{ block.super }}
+  <style type="text/css">
+    .hq-container {
+      padding-bottom: 0;
+      margin-bottom: 0;
+    }
+  </style>
+{% endblock %}
+
 {% block js %}{{ block.super }}
     <script src="{% static 'moment/moment.js' %}"></script>
     <script src="{% static 'requirejs/require.js' %}"></script>
     <script src="{% static 'app_manager/js/app-notifications.js' %}"></script>
     <script src="{% static 'js/ws4redis.js' %}"></script>
+    <script src="{% static 'app_manager/js/edit_form_details.js' %}"></script>
 {% endblock %}
 
 {% block js-inline %}{{ block.super }}
@@ -28,6 +38,16 @@
             plugins: {{ plugins|JSON }},
             features: {{ features|JSON }},
             core: {
+                defaultHelpTextTemplateId:
+                  {% if form.get_action_type == 'open' %}
+                      '#fd-hq-helptext-registration'
+                  {% elif form.get_action_type == 'close' %}
+                      '#fd-hq-helptext-close'
+                  {% elif form.get_action_type == 'update' %}
+                      '#fd-hq-helptext-followup'
+                  {% else %}
+                      '#fd-hq-helptext-survey'
+                  {% endif %},
                 dataSourcesEndpoint: '{% url "get_form_data_schema" domain=domain form_unique_id=form.get_unique_id %}',
                 dataSources: [
                     {% comment %} DEPRECATED. Use dataSourcesEndpoint {% endcomment %}
@@ -39,6 +59,25 @@
                 ],
                 form: {{ form.source|JSON }},
                 formId: '{{ form.get_unique_id }}',
+                formIconClass:
+                  {% if form.get_action_type == 'open' %}
+                      "fcc fcc-app-createform"
+                  {% elif form.get_action_type == 'close' %}
+                      "fcc fcc-app-completeform"
+                  {% elif form.get_action_type == 'update' %}
+                      "fcc fcc-app-updateform"
+                  {% else %}
+                      "fa fa-file-o"
+                  {% endif %},
+                formLoadingCallback: function () {
+                  $('#formdesigner').addClass('loading');
+                },
+                formLoadedCallback: function () {
+                  $('#formdesigner').removeClass('loading');
+                  $('#formdesigner .fd-content-left .fd-head-text').after(
+                      $('#fd-hq-edit-formname-button').html()
+                  );
+                },
                 formName: "{{ form.name|trans:app.langs|escapejs }}",
                 saveType: 'patch',
                 saveUrl: '{% url "edit_form_attr" domain app.id form.get_unique_id "xform" %}',
@@ -56,6 +95,7 @@
                 onFormSave: function (data) {
                     var app_manager = hqImport('app_manager/js/app_manager.js')
                     app_manager.updateDOM(data.update);
+                    $('.js-preview-toggle').removeAttr('disabled');
                     {% if request.couch_user.days_since_created == 0 %}
                         analytics.workflow('Saved the Form Builder within first 24 hours');
                     {% endif %}
@@ -162,11 +202,10 @@
                 'jquery.vellum': 'main'
             }
         });
-        
+
         require(["jquery", "jquery.vellum", "moment"], function ($) {
             $(function () {
                 $("#edit").hide();
-                $('#hq-footer').hide();
 
                 $('#formdesigner').vellum(VELLUM_OPTIONS);
 
@@ -183,14 +222,160 @@
             });
         });
         analytics.workflow('Entered the Form Builder');
-
-    </script>
+        $(function () {
+            var previewApp = hqImport('app_manager/js/preview_app.js');
+
+            {% if form.uses_cases %}
+            // todo make this a more broadly used util, perhaps? actually add buttons to formplayer?
+            var _prependTemplateToSelector = function (selector, layout, attempts, callback) {
+                attempts = attempts || 0;
+                if ($(selector).length) {
+                    var $toggleParent = $(selector);
+                    $toggleParent.prepend(layout);
+                    callback();
+                } else if (attempts <= 30) {
+                    // give up appending element after waiting 30 seconds to load
+                    setTimeout(function () {
+                        _prependTemplateToSelector(selector, layout, attempts++, callback);
+                    }, 1000);
+                }
+            };
+            _prependTemplateToSelector(
+                '.fd-form-actions',
+                $('#js-fd-manage-case').html(),
+                0,
+                function () {
+                    previewApp.appendToggleTo('.fd-form-actions', $('#js-fd-app-preview-btn-template').html());
+                }
+            );
+            {% else %}
+                previewApp.appendToggleTo('.fd-form-actions', $('#js-fd-app-preview-btn-template').html());
+            {% endif %}
+
+        });
+        $(function () {
+            var editDetails = hqImport('app_manager/js/edit_form_details.js');
+            editDetails.initName(
+                '{{ form.name|trans:app.langs|escapejs }}',
+                '{{ edit_form_name_url }}'
+            );
+            editDetails.initComment(
+                '{{ form.comment|escapejs }}',
+                '{{ edit_form_comment_url }}'
+            );
+            editDetails.setUpdateCallbackFn(function (name, comment) {
+                $('#formdesigner .fd-content-left .fd-head-text').text(name);
+                $('#edit-form-name-modal').modal('hide');
+            });
+            $('#edit-form-name-modal').koApplyBindings(editDetails);
+        });
+
+    </script>
+
+    {% if can_preview_form %}
+    <script type="text/html" id="js-fd-app-preview-btn-template">
+        {% include 'app_manager/v2/partials/app_preview_toggle.html' %}
+    </script>
+    {% endif %}
+
+    <script type="text/html" id="js-fd-manage-case">
+      <div class="btn-group pull-right">
+        <a class="btn btn-manage" href="{% url "view_form" domain app.id module.id form.id %}">
+          <i class="fa fa-cog"></i> {% trans 'Manage Case' %}
+        </a>
+      </div>
+    </script>
+
+    <script type="text/html" id="fd-hq-helptext-registration">
+        <h4>{% blocktrans %}This is a <i class="fcc fcc-app-createform"></i> Registration Form.{% endblocktrans %}</h4>
+        <p>
+          {% blocktrans %}
+            Users will fill it out when they need to <strong>add</strong> a new item to the application.
+          {% endblocktrans %}
+        </p>
+    </script>
+
+    <script type="text/html" id="fd-hq-helptext-close">
+        close form
+    </script>
+
+    <script type="text/html" id="fd-hq-helptext-followup">
+        <h4>{% blocktrans %}This is a <i class="fcc fcc-app-updateform"></i> Followup Form.{% endblocktrans %}</h4>
+        <p>
+          {% blocktrans %}
+            Users will fill it out when they need to <strong>update</strong> an item that has already been added to the application.
+          {% endblocktrans %}
+        </p>
+    </script>
+
+    <script type="text/html" id="fd-hq-helptext-survey">
+        <h4>{% blocktrans %}This is a <i class="fa fa-file-o"></i> Survey.{% endblocktrans %}</h4>
+        <p>
+          {% blocktrans %}
+          It's useful for asking questions once, for information that you won't need to follow up on later.
+          {% endblocktrans %}
+        </p>
+    </script>
+
+    <script type="text/html" id="fd-hq-edit-formname-button">
+      <a href="#edit-form-name-modal" class="link-edit-form" data-toggle="modal">
+        <i class="fa fa-pencil"></i>
+      </a>
+    </script>
+
 {% endblock %}
 
 {% block title %}{{ form.name|clean_trans:langs }}{% endblock %}
 
 {% block form-view %}
-    <div id="formdesigner" class="clearfix"></div>
+    <div id="formdesigner" class="clearfix app-manager-v2 loading"></div>
 {% endblock %}
 
 {% block column_style %}hq-flush-content{% endblock %}
+
+{% block modals %}
+  <div class="modal fade" id="edit-form-name-modal">
+      <div class="modal-dialog">
+          <div class="modal-content">
+              <div class="modal-header">
+                  <button type="button" class="close" data-dismiss="modal">
+                      <span aria-hidden="true">&times;</span>
+                  </button>
+                  <h4 class="modal-title">{% trans "Edit Form Details" %}</h4>
+              </div>
+              <form name="update-form-data" class="form-horizontal" data-bind="submit:update">
+                  <div class="modal-body">
+                      <div class="form-group">
+                          <div class="col-sm-3">
+                              <label for="update-form-name" class="control-label">
+                                  {% trans "Form Name" %}
+                              </label>
+                          </div>
+                          <div class="col-sm-9">
+                              <input type="text" data-bind="value: name" class="form-control" />
+                          </div>
+                      </div>
+                      <div class="form-group">
+                          <div class="col-sm-3">
+                              <label for="update-form-name" class="control-label">
+                                  {% trans "Comment" %}
+                              </label>
+                          </div>
+                          <div class="col-sm-9">
+                              <textarea rows="5"
+                                        data-bind="value: comment"
+                                        class="form-control"></textarea>
+                          </div>
+                      </div>
+                  </div>
+                  <div class="modal-footer">
+                      <a href="#" data-dismiss="modal" class="btn btn-default">{% trans "Cancel" %}</a>
+                      <button type="submit" class="btn btn-primary">{% trans "Save" %}</button>
+                  </div>
+              </form>
+          </div>
+      </div>
+</div>
+{% endblock %}
+
+{% block footer %}{% endblock %}
{'fraction_non_alphanumeric': 0.17164051355206847, 'fraction_numerical': 0.009472182596291012, 'mean_word_length': 1.6209062359802602, 'pattern_counts': {'":': 0, '<': 164, '<?xml version=': 0, '>': 162, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1698004', 'n_tokens_mistral': 5545, 'n_tokens_neox': 5094, 'n_words': 960}