content: module IHP.IDE.Data.View.ShowDatabase where
  
  import IHP.ViewPrelude
  import IHP.IDE.ToolServer.Types
  import IHP.IDE.Data.View.Layout
  
  data ShowDatabaseView = ShowDatabaseView {
          tableNames :: [Text]
      }
  
  instance View ShowDatabaseView where
      html ShowDatabaseView { .. } = [hsx|
          <div class="h-100">
              {headerNav}
              <div class="h-100 row no-gutters" oncontextmenu="event.preventDefault();">
                  {renderTableSelector tableNames ""}
              </div>
          </div>
      |]
  
  
  renderTableSelector :: [Text] -> Text -> Html
  renderTableSelector tableNames activeTableName = [hsx|
      <div class="col-2 object-selector" oncontextmenu="event.preventDefault();">
          <div class="d-flex">
              <h5 class="pl-3">Tables</h5>
          </div>
          {forEach tableNames renderTable}
          <div class="text-muted context-menu-notice">Right click to open context menu</div>
      </div>
  |]
      where
          renderTable :: Text -> Html
          renderTable name = [hsx|
              <a
                  href={ShowTableRowsAction name}
                  class={classes [("object object-table w-100 context-table pl-3", True), ("active", name == activeTableName)]}
                  oncontextmenu={"showContextMenu('" <> contextMenuId <> "'); event.stopPropagation();"}
              >
                  {name}
              </a>
              <div class="custom-menu menu-for-table shadow backdrop-blur" id={contextMenuId}>
                  <a href={pathTo (ShowTableAction name)}>Show Schema</a>
                  <a
                      href={pathTo (DeleteTableRowsAction name)}
                      class="js-delete"
                      data-confirm={"Are you sure you want to delete all rows in '" <> name <> "' table?"}
                  >Delete All Rows</a>
              </div>
          |]
              where
                  contextMenuId = "context-menu-table-" <> name
  