import { Component, Input } from "@angular/core";

@Component({
  selector: "form-only",
  template: `
    <div
      class="occupy-page"
      [style.background-color]="theme == 'inside' ? '#F9F9F9' : ''"
      [style.border-top]="theme == 'inside' ? '1px solid #F9F9F9' : ''"
    >
      <div grid class="container">
        <div row>
          <div columns="2"></div>
          <div columns="8">
            <div class="form-section">
              <title-and-section
                [attr.id]="skipNavID"
                [title]="title"
                [section]="section"
              ></title-and-section>
            </div>
            <ng-content></ng-content>
          </div>
          <div columns="2"></div>
        </div>
      </div>
    </div>
  `,
  standalone: false,
})
export class FormOnlyPageTemplateComponent {
  /**
   * Sets the theme of the component
   */
  @Input() public theme: "inside" | "outside";
  /**
   * Sets the TitleAndSectionComponent section input
   */
  @Input() public section: string;
  /**
   * Sets the TitleAndSectionComponent title input
   */
  @Input() public title: string;
  /**
   * Sets the target id for 508 skip navigation
   */
  @Input() public skipNavID: string = "primary-content";
}