import * as svgContent from "./svgConstants";

export const sectionModalViews = [
  {
    label: `1 Column: Blank`,
    name: "section11Empty",
    type: "view",
    content: `
    <div class="dc-sview sContainer">
      ${svgContent.section11Empty}
    </div>
    `,
  },
  {
    label: `2 Columns: Blank`,
    name: "section22Empty",
    type: "view",
    content: `
    <div class="dc-sview sContainer">
      ${svgContent.section22Empty}
    </div>`,
  },
  {
    label: `3 Columns: Blank`,
    name: "section33Empty",
    type: "view",
    content: `
    <div class="dc-sview sContainer">
      ${svgContent.section33Empty}
    </div>`,
  },
  {
    label: `4 Columns: Blank`,
    name: "section44Empty",
    type: "view",
    content: `
    <div class="dc-sview sContainer">
      ${svgContent.section44Empty}
    </div>`,
  },
  {
    label: `1 Column: 12/12`,
    name: "section11",
    type: "view",
    content: `
    <div class="dc-sview sContainer">
      ${svgContent.section11}
    </div>
    `,
  },
  {
    label: `2 Columns: 4/12,8/12`,
    name: "section22",
    type: "view",
    content: `
    <div class="dc-sview sContainer">
      ${svgContent.section22}
    </div>`,
  },
  {
    label: `3 Columns: 8/12,4/12`,
    name: "section33",
    type: "view",
    content: `
    <div class="dc-sview sContainer">
      ${svgContent.section33}
    </div>`,
  },
  {
    label: `4 Columns: 4x3/12`,
    name: "section44",
    type: "view",
    content: `
    <div class="dc-sview sContainer">
      ${svgContent.section44}
    </div>`,
  },
  {
    label: `2 Columns: 4/12,8/12`,
    name: "section4060",
    type: "view",
    content: `
    <div class="dc-sview sContainer">
      ${svgContent.section4060}
    </div>`,
  },
  {
    label: `2 Columns: 8/12,4/12`,
    name: "section6040",
    type: "view",
    content: `
    <div class="dc-sview sContainer">
      ${svgContent.section6040}
    </div>`,
  },
  {
    label: `3 Columns: 6/12,3/12,3/12`,
    name: "section633",
    type: "view",
    content: `
    <div class="dc-sview sContainer">
      ${svgContent.section633}
    </div>`,
  },
  {
    label: `3 Columns: 3/12,6/12,3/12`,
    name: "section363",
    type: "view",
    content: `
    <div class="dc-sview sContainer">
      ${svgContent.section363}
    </div>`,
  },
  {
    label: `2 Columns`,
    name: "section2columns",
    type: "view",
    content: `
    <div class="dc-sview sContainer sdContainer">
      ${svgContent.section2columns}
    </div>`,
  },
  {
    label: `3 Columns`,
    name: "section3columns",
    type: "view",
    content: `
    <div class="dc-sview sContainer sdContainer">
      ${svgContent.section3columns}
    </div>`,
  },
  {
    label: `4 Columns`,
    name: "section4columns",
    type: "view",
    content: `
    <div class="dc-sview sContainer sdContainer">
      ${svgContent.section4columns}
    </div>`,
  },
  {
    label: `2 Columns Header Banner`,
    name: "section2columnsHB",
    type: "view",
    content: `
    <div class="dc-sview sContainer sdContainer">
      ${svgContent.section2columnsHB}
    </div>`,
  },
  {
    label: `3 Columns Header Banner`,
    name: "section3columnsHB",
    type: "view",
    content: `
    <div class="dc-sview sContainer sdContainer">
      ${svgContent.section3columnsHB}
    </div>`,
  },
  {
    label: `4 Columns Header Banner`,
    name: "section4columnsHB",
    type: "view",
    content: `
    <div class="dc-sview sContainer sdContainer">
      ${svgContent.section4columnsHB}
    </div>`,
  },
  {
    label: `List: 2 Columns 3 Rows`,
    name: "section2columns3RowsList",
    type: "view",
    content: `
    <div class="dc-sview sContainer sdContainer">
      ${svgContent.section2columns3RowsList}
    </div>`,
  },
  {
    label: `List Header: 2 Columns`,
    name: "section2columns3RowsListWithHeader",
    type: "view",
    content: `
    <div class="dc-sview sContainer sdContainer">
      ${svgContent.section2columns3RowsListWithHeader}
    </div>`,
  },
  {
    label: `1 Row Form`,
    name: "section1rowForm",
    type: "view",
    content: `
    <div class="dc-sview sContainer sdContainer">
      ${svgContent.section1rowForm}
    </div>`,
  },
  {
    label: `3 Rows`,
    name: "section3rows",
    type: "view",
    content: `
    <div class="dc-sview sContainer sdContainer">
      ${svgContent.section3rows}
    </div>`,
  },
  {
    label: `3 Rows`,
    name: "section3rowsLeftAlign",
    type: "view",
    content: `
    <div class="dc-sview sContainer sdContainer">
      ${svgContent.section3rowsLeftAlign}
    </div>`,
  },
  {
    label: `3 Rows Simple`,
    name: "section3rowsSimple",
    type: "view",
    content: `
    <div class="dc-sview sContainer sdContainer">
      ${svgContent.section3rowsSimple}
    </div>`,
  },
];
