.textAreaStyle() {
	white-space: pre-wrap;
	visibility: -oxy-collapse-text;
}

.elementNameHeaderStyle() {
	display: block;
	background-color: rgb(30, 115, 175);
	color: white;
	font-weight: bold;
	border: 1px solid gray;
	padding-left: 0.3em;
}

.elementInfoHeaderStyle() {
	display: block;
	background-color: rgb(242, 242, 242);
	color: rgb(85, 85, 85);
	border: 1px solid gray;
	border-top: none;
	padding-left: 0.3em;
}

.addRemoveButtonGroupStyle() {
    display: block;
    content: ""
      oxy_editor(
            type, buttonGroup,
            label, '+',
            actionIDs, "doc-draft.insert.instruction, doc-draft.insert.image, doc-draft.insert.file",
            actionStyle, "both")
      oxy_button(
        action, oxy_action(
          name, '-', 
          description, 'Delete this element.', 
          operation, 'ro.sync.ecss.extensions.commons.operations.DeleteElementOperation', 
          arg-elementLocation, '.'
        )
      )
     ;
}

.insertAudienceButtonStyle() {
    content: "" 
      oxy_editor(
        action, oxy_action(
            arg-fragment, "<prolog><metadata><audience>${caret}</audience></metadata></prolog>",
            arg-insertLocation, "/doc-draft/instructions",
            arg-insertPosition, "Before",
            arg-schemaAware, "true",
            name, "Insert audience",
            description, "Insert audience",
            operation, "ro.sync.ecss.extensions.commons.operations.InsertFragmentOperation"),
            type, "button");
}

.insertSimilarTopicButtonStyle() {
    content: ""
      oxy_editor(
        action, oxy_action(
            arg-fragment, "<relationship-context><similar-topic href=\"\"/></relationship-context>",
            arg-insertLocation, "/doc-draft/instructions",
            arg-insertPosition, "After",
            arg-schemaAware, "true",
            name, "Insert similar topic",
            description, "Insert similar topic",
            operation, "ro.sync.ecss.extensions.commons.operations.InsertFragmentOperation"),
            type, "button");
}

@media oxygen AND (min-width:25cm) {

    /* A gray background */
    oxy|document {
      background-color:#fbfbfb;
    }
    
    /* The white page.*/
    :root{      
      /* White page */
      border: 1px solid #c6c6c6;
      background-color:white;
      
      /* Centered*/
      margin-left: auto;
      margin-right: auto;
      margin-top: 0.25in;
      margin-bottom: 0.25in;
      
      /* Letter */
      width: 21.59cm; 
      min-height:10cm; /*27.94cm; would be the letter, but a smaller size avoids large caret jumps*/
      
    }
    
    /* Padding inside the page. */
    :root {
      padding: 2em 2em 5em 3em;
    }

}

@media oxygen AND (max-width:25cm) {
    :root {
      padding-left: 1em;
      padding-right: 1em;
    }
}

title {
	display: block;
	font-family : "Calibri" , "UnDotum" , sans-serif ;
	font-weight: bold;
	font-size: 2em;
	margin: 0.5em 0;
}

title:after(3) {
    content: "After providing the desired data, run the \"Generate Documentation Draft\" action.";
    display: block;
    color: rgb(85, 85, 85);
    font-weight: normal;
    font-size: 0.5em;
    margin-top: 1em;
    margin-bottom: 0.5em;
}

title:after(5) {
    content: oxy_editor(
        action,
        oxy_action(
            arg-fragment, "<context>${caret}</context>",
            arg-insertLocation, ".",
            arg-insertPosition, "After",
            arg-schemaAware, "true",
            name, "Insert context",
            description, "Insert context",
            operation, "ro.sync.ecss.extensions.commons.operations.InsertFragmentOperation"),
            type, "button");
}

:root:has(context) > title:after(5) {
    display: none;
}

title:after(10) {
    .insertAudienceButtonStyle();
}

:root:has(context) > title:after(10) {
    .insertAudienceButtonStyle();
}

:root:has(prolog) > title:after(10) {
    display: none;
}

title:after(20) {
    .insertSimilarTopicButtonStyle();
}

:root:has(prolog):has(context) > title:after(20) {
    .insertSimilarTopicButtonStyle();
}

:root:has(relationship-context) > title:after(20) {
    display: none;
}

context { 
    &:before(10) {
        .elementNameHeaderStyle();
        content: "Context";
    }
    
    &:before(1) {
        .elementInfoHeaderStyle();
        content: "The context instructs the AI to assume a role by providing information about the user's area of expertise to make the responses more useful and relevant.";
    }

    .textAreaStyle(); 
    content: oxy_textArea(edit, '#text', contentType, 'text/html', fontInherit, true, rows, 3, width, 100%);
}

audience { 
    &:before(10) {
        .elementNameHeaderStyle();
        content: "Audience";
    }
    
    &:before(1) {
        .elementInfoHeaderStyle();
        content: "The target audience guides the AI in selecting the vocabulary and style.";
    }
    
    .textAreaStyle(); 
    content: oxy_textArea(edit, '#text', contentType, 'text/html', fontInherit, true, rows, 3, width, 100%);
}

draft-summary { 
    &:before(10) {
        .elementNameHeaderStyle();
        content: "Draft summary";
    }
    
    &:before(1) {
        .elementInfoHeaderStyle();
        content: "The summary contains the information needed as a starting point for the draft generation.";
    }
    
    &:after(1) {
        padding-bottom: 1.25em;
        padding-left: 0.25em;
        content: 
               oxy_checkbox(
                   edit, "@use-related-content-from-project",
                   labels, "Use related content from project");
    }
    
    .textAreaStyle(); 
    content: oxy_textArea(edit, '#text', contentType, 'text/html', fontInherit, true, rows, 9, width, 100%);
}

instruction {
    &:before(10) {
        .elementNameHeaderStyle();
        content: "Instruction";
    }
    
    &:before(1) {
        .elementInfoHeaderStyle();
        content: "An instruction defines a specific task and directs the AI to meet a specific goal.";
    }
    
	.textAreaStyle();
    content: oxy_textArea(edit, '#text', contentType, 'text/html', fontInherit, true, rows, 3, width, 100%);
    
    &:after {
        .addRemoveButtonGroupStyle()
    }
    
	instruction + & , image + & , file +  & {
		margin-top: 2em;
	}
}

image {
    &:before(10) {
        .elementNameHeaderStyle();
        content: "Image";
    }
    
    &:before(1) {
        .elementInfoHeaderStyle();
        content: "An image to be analyzed by the AI. You can tell the AI what to do with the image in an <instruction> element.";
    }
    
    .textAreaStyle();
    content: oxy_urlChooser(edit, '@href', columns, 100, width, 100%);
    
    &:after(1) {
        display: block;
        max-width: 15em;
        margin-top: 0.25em;
        content: attr(href, url);
    }
    
    &:after(10) {
        .addRemoveButtonGroupStyle()
    }
    
	image + & , instruction + & , file + &  {
		margin-top: 2em;
	}
}

file { 
    &:before(10) {
        .elementNameHeaderStyle();
        content: "File"; 
        margin-top: 2em; 
    }
    
    &:before(1) {
        .elementInfoHeaderStyle();
        content: "A file, such as a plain text, Markdown, or XML document, as well as PDFs, Word documents (.docx), or PowerPoint presentations (.pptx). Tell the AI what to do with the file content in an <instruction> element.";
    }
    
    .textAreaStyle(); 
    content: oxy_urlChooser(edit, '@href', columns, 100, width, 100%); 
	
	&:after(10) {
	    .addRemoveButtonGroupStyle()
	}
	
	file + &  , image + & , instruction + & {
	    margin-top: 2em;
	}
}

similar-topic { 
    &:before(10) {
        .elementNameHeaderStyle();
        content: "Similar topic"; 
        margin-top: 2em; 
    }
    
    &:before(1) {
        .elementInfoHeaderStyle();
        content: "A topic that guides the AI in generating the draft. The AI will consider its structure, markup, tone, and style as inspiration.";
    }
    
    .textAreaStyle(); 
    content: oxy_urlChooser(edit, '@href', columns, 100, width, 100%); 
}