<!DOCTYPE html>
<html lang="en">
<head>
     <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>{{name}} - File Manager</title>
    <script src="/media/editor/ace.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 <link rel="icon" type="image/png" sizes="32x32" href="/media/logo.png">
    
	<link rel="stylesheet" href="/media/editor/smart.css">
	
   
</head>
<body>
   <div id="maintbl" class="flex-container">
   
   
  
   
   
    <div class="flex-item left" style="margin-left:10px">
       
    </div>

   

    
			
           

      
		<input type="button" style="margin-left:10px;" onclick="closeTab();" class="btn btn-white btn-md" value="Close">
    </div>
</div>

<style>
.ace_editor-view-only {
    pointer-events: auto; /* Enable mouse interactions for selection and scrolling */
    user-select: text; /* Allow text selection for copying */
    background-color: #f5f5f5; /* Optional: Light background */
    color: #000; /* Text color */
    overflow-wrap: break-word; /* Ensure long lines wrap */
    word-wrap: break-word; /* Ensure long lines wrap */
    white-space: pre-wrap; /* Preserve whitespace and enable wrapping */
    word-break: break-word; /* Break long words */
    margin: 10px;
    padding: 10px;
    width: 100%; /* Use full available width */
    height: 100%; /* Make the div take up the full height of its container */
    box-sizing: border-box; /* Include padding and border in total width */
    border: 1px solid #ccc; /* Optional: Border for clarity */
    border-radius: 4px; /* Optional: Rounded corners */
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: auto; /* Enable horizontal scrolling if needed */
    white-space: pre-line; /* Ensure newlines are preserved */
}

html, body {
    height: 100%; /* Ensure the body and html take up full height */
    margin: 0; /* Remove any default margin */
}

#container {
    height: 100%; /* Make sure the parent container takes up the full height */
}

.ace_editor-view-only div {
    caret-color: transparent; /* Remove blinking caret */
}
</style>

<div id="container">
    <div id="editor" class="ace_editor-view-only" aria-readonly="true">{{content}}
    </div>
</div>

  <script>
  function closeTab() {
            // This will close the current tab
            window.close();
        }
  </script>
</body>
</html>
