{
    "component": "question-list-multiquestion",
    "fixtures": [
        {
            "name": "default",
            "options": {
                "question": {
                    "id": "listMultiquestion",
                    "question": "Enter as many items as needed",
                    "number_of_items": 5,
                    "questions": [
                        {
                            "id": "listMultiquestion0",
                            "question": "I am question 1",
                            "questions": [
                                {
                                    "type": "text",
                                    "id": "listMultiquestionText00",
                                    "question": "Here is the first question"
                                },
                                {
                                    "type": "text",
                                    "id": "listMultiquestionText01",
                                    "question": "Here is the second question"
                                }
                            ]
                        },
                        {
                            "id": "listMultiquestion1",
                            "question": "I am question 2",
                            "questions": [
                                {
                                    "type": "text",
                                    "id": "listMultiquestionText10",
                                    "question": "Here is the first question"
                                },
                                {
                                    "type": "text",
                                    "id": "listMultiquestionText11",
                                    "question": "Here is the second question"
                                }
                            ]
                        },
                        {
                            "id": "listMultiquestion2",
                            "question": "I am question 3",
                            "questions": [
                                {
                                    "type": "text",
                                    "id": "listMultiquestionText20",
                                    "question": "Here is the first question"
                                },
                                {
                                    "type": "text",
                                    "id": "listMultiquestionText21",
                                    "question": "Here is the second question"
                                }
                            ]
                        },
                        {
                            "id": "listMultiquestion3",
                            "question": "I am question 4",
                            "questions": [
                                {
                                    "type": "text",
                                    "id": "listMultiquestionText30",
                                    "question": "Here is the first question"
                                },
                                {
                                    "type": "text",
                                    "id": "listMultiquestionText31",
                                    "question": "Here is the second question"
                                }
                            ]
                        },
                        {
                            "id": "listMultiquestion4",
                            "question": "I am question 5",
                            "questions": [
                                {
                                    "type": "text",
                                    "id": "listMultiquestionText40",
                                    "question": "Here is the first question"
                                },
                                {
                                    "type": "text",
                                    "id": "listMultiquestionText41",
                                    "question": "Here is the second question"
                                }
                            ]
                        }
                    ]
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" data-module=\"dm-question-list-multiquestion-client-side\" data-max-number-of-items=\"5\" id=\"input-listMultiquestion\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    Enter as many items as needed\n  </legend>\n\n    <div class=\"dm-list-multiquestion__items\">\n          <div class=\"dm-list-multiquestion__item govuk-!-margin-bottom-6\">\n<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    I am question 1\n  </legend>\n                  <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n                <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-half\">\n                  <div\n  class=\"question \"\n  id=\"listMultiquestionText00\"\n>\n    \n\n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText00\">\n    Here is the first question\n  </label>\n  <input class=\"govuk-input\" id=\"input-listMultiquestionText00\" name=\"listMultiquestionText00\" type=\"text\">\n</div>\n\n\n</div>\n\n                </div>\n                <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-half\">\n                  <div\n  class=\"question \"\n  id=\"listMultiquestionText01\"\n>\n    \n\n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText01\">\n    Here is the second question\n  </label>\n  <input class=\"govuk-input\" id=\"input-listMultiquestionText01\" name=\"listMultiquestionText01\" type=\"text\">\n</div>\n\n\n</div>\n\n                </div>\n                  </div>\n\n</fieldset>\n          </div>          <div class=\"dm-list-multiquestion__item govuk-!-margin-bottom-6\">\n<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    I am question 2\n  </legend>\n                  <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n                <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-half\">\n                  <div\n  class=\"question \"\n  id=\"listMultiquestionText10\"\n>\n    \n\n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText10\">\n    Here is the first question\n  </label>\n  <input class=\"govuk-input\" id=\"input-listMultiquestionText10\" name=\"listMultiquestionText10\" type=\"text\">\n</div>\n\n\n</div>\n\n                </div>\n                <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-half\">\n                  <div\n  class=\"question \"\n  id=\"listMultiquestionText11\"\n>\n    \n\n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText11\">\n    Here is the second question\n  </label>\n  <input class=\"govuk-input\" id=\"input-listMultiquestionText11\" name=\"listMultiquestionText11\" type=\"text\">\n</div>\n\n\n</div>\n\n                </div>\n                  </div>\n\n</fieldset>\n          </div>          <div class=\"dm-list-multiquestion__item govuk-!-margin-bottom-6\">\n<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    I am question 3\n  </legend>\n                  <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n                <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-half\">\n                  <div\n  class=\"question \"\n  id=\"listMultiquestionText20\"\n>\n    \n\n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText20\">\n    Here is the first question\n  </label>\n  <input class=\"govuk-input\" id=\"input-listMultiquestionText20\" name=\"listMultiquestionText20\" type=\"text\">\n</div>\n\n\n</div>\n\n                </div>\n                <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-half\">\n                  <div\n  class=\"question \"\n  id=\"listMultiquestionText21\"\n>\n    \n\n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText21\">\n    Here is the second question\n  </label>\n  <input class=\"govuk-input\" id=\"input-listMultiquestionText21\" name=\"listMultiquestionText21\" type=\"text\">\n</div>\n\n\n</div>\n\n                </div>\n                  </div>\n\n</fieldset>\n          </div>          <div class=\"dm-list-multiquestion__item govuk-!-margin-bottom-6\">\n<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    I am question 4\n  </legend>\n                  <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n                <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-half\">\n                  <div\n  class=\"question \"\n  id=\"listMultiquestionText30\"\n>\n    \n\n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText30\">\n    Here is the first question\n  </label>\n  <input class=\"govuk-input\" id=\"input-listMultiquestionText30\" name=\"listMultiquestionText30\" type=\"text\">\n</div>\n\n\n</div>\n\n                </div>\n                <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-half\">\n                  <div\n  class=\"question \"\n  id=\"listMultiquestionText31\"\n>\n    \n\n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText31\">\n    Here is the second question\n  </label>\n  <input class=\"govuk-input\" id=\"input-listMultiquestionText31\" name=\"listMultiquestionText31\" type=\"text\">\n</div>\n\n\n</div>\n\n                </div>\n                  </div>\n\n</fieldset>\n          </div>          <div class=\"dm-list-multiquestion__item govuk-!-margin-bottom-6\">\n<fieldset class=\"govuk-fieldset\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    I am question 5\n  </legend>\n                  <div class=\"govuk-grid-row govuk-!-margin-bottom-2\">\n                <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-half\">\n                  <div\n  class=\"question \"\n  id=\"listMultiquestionText40\"\n>\n    \n\n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText40\">\n    Here is the first question\n  </label>\n  <input class=\"govuk-input\" id=\"input-listMultiquestionText40\" name=\"listMultiquestionText40\" type=\"text\">\n</div>\n\n\n</div>\n\n                </div>\n                <div class=\"dm-multiquestion__item-input-column govuk-grid-column-one-half\">\n                  <div\n  class=\"question \"\n  id=\"listMultiquestionText41\"\n>\n    \n\n\n<div class=\"govuk-form-group\">\n  <label class=\"govuk-label govuk-label--m\" for=\"input-listMultiquestionText41\">\n    Here is the second question\n  </label>\n  <input class=\"govuk-input\" id=\"input-listMultiquestionText41\" name=\"listMultiquestionText41\" type=\"text\">\n</div>\n\n\n</div>\n\n                </div>\n                  </div>\n\n</fieldset>\n          </div>    </div>\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-full\">\n        <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-multiquestion__item-remove govuk-visually-hidden\" data-module=\"govuk-button\">\n  Remove<span class=\"govuk-visually-hidden\"> item <span class=\"dm-list-multiquestion__item-remove-counter\">0</span></span>\n</button>\n      </div>\n    </div>\n\n    <div class=\"govuk-grid-row\">\n      <div class=\"govuk-grid-column-full\">\n        <button type=\"button\" class=\"govuk-button govuk-button--secondary dm-list-multiquestion__item-add govuk-visually-hidden\" data-module=\"govuk-button\">\n  Add (<span class=\"dm-list-multiquestion__item-add-counter\">0</span> remaining)\n</button>\n      </div>\n    </div>\n\n</fieldset>\n</div>"
        },
        {
            "name": "with server side options",
            "options": {
                "question": {
                    "id": "listMultiquestion",
                    "question": "Enter as many items as needed",
                    "number_of_items": 5,
                    "questions": [
                        {
                            "id": "listMultiquestion0",
                            "question": "I am question 1",
                            "questions": [
                                {
                                    "type": "text",
                                    "id": "listMultiquestionText00",
                                    "question": "Here is the first question",
                                    "name": "Here is the first question"
                                },
                                {
                                    "type": "text",
                                    "id": "listMultiquestionText01",
                                    "question": "Here is the second question",
                                    "name": "Here is the second question"
                                }
                            ]
                        },
                        {
                            "id": "listMultiquestion1",
                            "question": "I am question 2",
                            "questions": [
                                {
                                    "type": "text",
                                    "id": "listMultiquestionText10",
                                    "question": "Here is the first question",
                                    "name": "Here is the first question"
                                },
                                {
                                    "type": "text",
                                    "id": "listMultiquestionText11",
                                    "question": "Here is the second question",
                                    "name": "Here is the second question"
                                }
                            ]
                        },
                        {
                            "id": "listMultiquestion2",
                            "question": "I am question 3",
                            "questions": [
                                {
                                    "type": "text",
                                    "id": "listMultiquestionText20",
                                    "question": "Here is the first question",
                                    "name": "Here is the first question"
                                },
                                {
                                    "type": "text",
                                    "id": "listMultiquestionText21",
                                    "question": "Here is the second question",
                                    "name": "Here is the second question"
                                }
                            ]
                        },
                        {
                            "id": "listMultiquestion3",
                            "question": "I am question 4",
                            "questions": [
                                {
                                    "type": "text",
                                    "id": "listMultiquestionText30",
                                    "question": "Here is the first question",
                                    "name": "Here is the first question"
                                },
                                {
                                    "type": "text",
                                    "id": "listMultiquestionText31",
                                    "question": "Here is the second question",
                                    "name": "Here is the second question"
                                }
                            ]
                        },
                        {
                            "id": "listMultiquestion4",
                            "question": "I am question 5",
                            "questions": [
                                {
                                    "type": "text",
                                    "id": "listMultiquestionText40",
                                    "question": "Here is the first question",
                                    "name": "Here is the first question"
                                },
                                {
                                    "type": "text",
                                    "id": "listMultiquestionText41",
                                    "question": "Here is the second question",
                                    "name": "Here is the second question"
                                }
                            ]
                        }
                    ]
                },
                "server_side_options": {
                    "add_endpoint": "main.add_item",
                    "remove_endpoint": "main.remove_item",
                    "endpoint_values": {
                        "section_id": "questions"
                    }
                }
            },
            "hidden": false,
            "description": "",
            "previewLayoutModifiers": [],
            "html": "<div class=\"govuk-form-group\">\n<fieldset class=\"govuk-fieldset\" id=\"input-listMultiquestion\">\n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n    Enter as many items as needed\n  </legend>\n\n\n      <div class=\"govuk-grid-row\">\n        <div class=\"govuk-grid-column-full\">\n            <a href=\"/suppliers/add-item/questions/listMultiquestion/0\" role=\"button\" draggable=\"false\" class=\"govuk-button govuk-button--secondary dm-list-multiquestion__item-add\" data-module=\"govuk-button\">\n  Add (5 remaining)\n</a>\n        </div>\n      </div>\n\n</fieldset>\n</div>"
        }
    ]
}
