<!--
***********************************************************************************************************************
* DISCLAIMER
* This software is supplied by Renesas Electronics Corporation and is only intended for use with Renesas products. No
* other uses are authorized. This software is owned by Renesas Electronics Corporation and is protected under all
* applicable laws, including copyright laws.
* THIS SOFTWARE IS PROVIDED "AS IS" AND RENESAS MAKES NO WARRANTIES REGARDING
* THIS SOFTWARE, WHETHER EXPRESS, IMPLIED OR STATUTORY, INCLUDING BUT NOT LIMITED TO WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. ALL SUCH WARRANTIES ARE EXPRESSLY DISCLAIMED. TO THE MAXIMUM
* EXTENT PERMITTED NOT PROHIBITED BY LAW, NEITHER RENESAS ELECTRONICS CORPORATION NOR ANY OF ITS AFFILIATED COMPANIES
* SHALL BE LIABLE FOR ANY DIRECT, INDIRECT, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES FOR ANY REASON RELATED TO THIS
* SOFTWARE, EVEN IF RENESAS OR ITS AFFILIATES HAVE BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
* Renesas reserves the right, without notice, to make changes to this software and to discontinue the availability of
* this software. By using this software, you agree to the additional terms and conditions found by accessing the
* following link:
* http://www.renesas.com/disclaimer
*
* Copyright (C) 2026 Renesas Electronics Corporation. All rights reserved.
***********************************************************************************************************************
***********************************************************************************************************************
* File Name    : src/access_gateway/apps/authentication/templates/authentication/login.html
* Version      : 1.00
* Product Name : Target Board Farm
* Device(s)    : N/A
* Description  : Proxy login page — user selection for TBF Access Gateway (testing mode).
***********************************************************************************************************************
***********************************************************************************************************************
* History      :
* Ver   DD.MM.YYYY  Author  Description
* 1.00  08.07.2026  KSi     Initial revision.
***********************************************************************************************************************
-->
<!--
***********************************************************************************************************************
* DISCLAIMER
* This software is supplied by Renesas Electronics Corporation and is only intended for use with Renesas products. No
* other uses are authorized. This software is owned by Renesas Electronics Corporation and is protected under all
* applicable laws, including copyright laws.
* THIS SOFTWARE IS PROVIDED "AS IS" AND RENESAS MAKES NO WARRANTIES REGARDING
* THIS SOFTWARE, WHETHER EXPRESS, IMPLIED OR STATUTORY, INCLUDING BUT NOT LIMITED TO WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. ALL SUCH WARRANTIES ARE EXPRESSLY DISCLAIMED. TO THE MAXIMUM
* EXTENT PERMITTED NOT PROHIBITED BY LAW, NEITHER RENESAS ELECTRONICS CORPORATION NOR ANY OF ITS AFFILIATED COMPANIES
* SHALL BE LIABLE FOR ANY DIRECT, INDIRECT, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES FOR ANY REASON RELATED TO THIS
* SOFTWARE, EVEN IF RENESAS OR ITS AFFILIATES HAVE BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
* Renesas reserves the right, without notice, to make changes to this software and to discontinue the availability of
* this software. By using this software, you agree to the additional terms and conditions found by accessing the
* following link:
* http://www.renesas.com/disclaimer
*
* Copyright (C) 2026 Renesas Electronics Corporation. All rights reserved.
***********************************************************************************************************************
***********************************************************************************************************************
* File Name    : src/access_gateway/apps/dashboard/templates/dashboard/base.html
* Version      : 1.00
* Product Name : Target Board Farm
* Device(s)    : N/A
* Description  : Base HTML template — Tailwind CDN, HTMX, dark mode, modal system, and theme toggle.
***********************************************************************************************************************
***********************************************************************************************************************
* History      :
* Ver   DD.MM.YYYY  Author  Description
* 1.00  08.07.2026  KSi     Initial revision.
***********************************************************************************************************************
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login — Renesas</title>

  
  <script>
    (function () {
      var t = localStorage.getItem('tbf_theme') || 'system';
      var s = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
      if (t === 'dark' || (t === 'system' && s))
        document.documentElement.classList.add('dark');
    })();
  </script>

  
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Archivo+Narrow:wght@400;600;700&display=swap" rel="stylesheet">

  
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      darkMode: 'class',
      theme: {
        extend: {
          colors: {
            'rns-blue':  '#2A289D',
            'rns-blue-d':'#1E1C85',
            'rns-ink':   '#3C3C3B',
            'rns-gray':  '#706F6F',
            'rns-paper': '#F2F2F2',
            'rns-red':   '#B71921',
            'rns-green': '#609A3B',
            'rns-amber': '#DFB118',
            'rns-sky':   '#43ABE2',
          },
          fontFamily: {
            narrow: ['"Archivo Narrow"', '"Arial Narrow"', 'Arial', 'sans-serif'],
          },
          keyframes: {
            fadeUp:   { '0%': { opacity:'0', transform:'translateY(8px)' }, '100%': { opacity:'1', transform:'translateY(0)' } },
            tbfPulse: { '0%,100%': { opacity:'1' }, '50%': { opacity:'0.35' } },
          },
          animation: {
            'fade-up':  'fadeUp 0.2s ease',
            'tbf-pulse':'tbfPulse 1s ease infinite',
          },
        },
      },
    };
  </script>

  
  <script src="https://unpkg.com/htmx.org@1.9.12/dist/htmx.min.js" defer></script>

  
</head>

<body class="font-narrow bg-rns-paper dark:bg-gray-950 text-rns-ink dark:text-gray-100 antialiased"
      hx-headers='{"X-CSRFToken": "4V8RA47o9pn31XWhXK3Z31gKCtrHkOgCx6cA1kLF2kHA3OEDGcTEannkxS5Jt8cH"}'>

  
<div class="relative min-h-screen overflow-hidden font-narrow">

  
  <img src="/static/dashboard/img/bg-connected-city-blue.jpg"
       alt="" aria-hidden="true"
       class="absolute inset-0 w-full h-full object-cover object-center">

  
  <div class="absolute inset-0"
       style="background: linear-gradient(130deg, rgba(8,8,38,.90) 0%, rgba(12,18,60,.74) 50%, rgba(6,12,40,.82) 100%);"></div>

  
  <div class="relative z-10 min-h-screen flex flex-col">

    
    <div class="px-12 py-7 flex items-center gap-4">
      <img src="/static/dashboard/img/renesas-wordmark-white.png"
           alt="Renesas" class="h-6 block">
      <div class="w-px h-5 bg-white/25"></div>
      <span class="text-white/65 text-[11px] font-bold tracking-[2px] uppercase">Board Allocation Portal</span>
    </div>

    
    <div class="flex-1 flex items-center justify-center px-8 pb-14">
      <div class="w-full max-w-3xl">

        
        <div class="flex items-center gap-3 px-4 py-2.5 mb-4"
             style="background: rgba(165,125,8,.88); backdrop-filter: blur(8px);">
          <svg class="flex-shrink-0 w-4 h-4 text-yellow-100" viewBox="0 0 24 24" fill="none"
               stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
            <path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/>
            <line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/>
          </svg>
          <span class="text-yellow-50 text-xs font-bold tracking-wide">
            PROXY LOGIN — SSO (Azure AD / Entra ID) not yet active. Select a test account below.
          </span>
        </div>

        
        <div class="bg-white/97 border-t-4 border-rns-blue shadow-2xl"
             style="border-top-color: #2A289D;">
          <div class="px-8 py-5 border-b border-gray-100 flex items-center justify-between">
            <div>
              <h1 class="text-lg font-bold text-rns-blue uppercase tracking-wide mb-0.5">
                Select Test Account
              </h1>
              <p class="text-sm text-rns-gray">
                Each account has a different role and permission set.
              </p>
            </div>
            <div class="flex items-center gap-1.5 px-3 py-1.5 bg-blue-50 border border-blue-200">
              <div class="w-2 h-2 rounded-full bg-rns-blue"></div>
              <span class="text-[11px] font-bold text-rns-blue tracking-wide">TESTING MODE</span>
            </div>
          </div>

          <div class="px-8 py-6">
            <div class="grid grid-cols-3 gap-3">
              
              <div class="col-span-3 text-center py-10 text-rns-gray">
                No users found. Run
                <code class="bg-gray-100 px-1.5 py-0.5 text-sm">python manage.py seed_data</code>
                to create test users.
              </div>
              
            </div>

            <p class="mt-4 pt-4 border-t border-gray-100 text-[11px] text-gray-400">
              In production, all users authenticate via Renesas Azure AD / Microsoft Entra ID (SSO).
              All test user passwords: <strong class="text-rns-gray">testpass123</strong>
            </p>
          </div>
        </div>

      </div>
    </div>

  </div>
</div>


  <div id="tbf-modal"
       class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/55"
       onclick="if(event.target===this) tbfCloseModal()">
    <div id="tbf-modal-content" class="w-full max-w-md"></div>
  </div>

  
  <script>
    var _themeLabels = { system:'System', light:'Light', dark:'Dark' };

    function tbfSetTheme(t) {
      localStorage.setItem('tbf_theme', t);
      var sys = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
      if (t === 'dark' || (t === 'system' && sys))
        document.documentElement.classList.add('dark');
      else
        document.documentElement.classList.remove('dark');
      _applyThemeUI(t);
      tbfCloseSettings();
    }

    function _applyThemeUI(t) {
      document.querySelectorAll('[data-theme-opt]').forEach(function (el) {
        var active = el.dataset.themeOpt === t;
        el.className = active
          ? 'w-full text-left px-3 py-2 text-xs font-bold uppercase tracking-wide bg-rns-blue text-white border border-rns-blue flex items-center justify-between'
          : 'w-full text-left px-3 py-2 text-xs font-bold uppercase tracking-wide bg-gray-50 dark:bg-gray-700 text-rns-gray dark:text-gray-300 border border-gray-200 dark:border-gray-600 hover:border-rns-blue hover:text-rns-blue dark:hover:text-blue-400 transition-colors flex items-center justify-between';
      });
      var lbl = document.getElementById('tbf-theme-label');
      if (lbl) lbl.textContent = _themeLabels[t] || 'System';
    }

    function tbfToggleSettings() {
      var p = document.getElementById('tbf-settings-panel');
      var b = document.getElementById('tbf-settings-backdrop');
      if (p) {
        var opening = p.classList.contains('hidden');
        p.classList.toggle('hidden');
        if (b) b.classList.toggle('hidden', !opening);
      }
    }

    function tbfCloseSettings() {
      var p = document.getElementById('tbf-settings-panel');
      var b = document.getElementById('tbf-settings-backdrop');
      if (p) p.classList.add('hidden');
      if (b) b.classList.add('hidden');
    }

    function tbfCloseModal() {
      var m = document.getElementById('tbf-modal');
      var c = document.getElementById('tbf-modal-content');
      if (m) m.classList.add('hidden');
      if (c) c.innerHTML = '';
    }

    document.addEventListener('DOMContentLoaded', function () {
      _applyThemeUI(localStorage.getItem('tbf_theme') || 'system');

      if (window.matchMedia) {
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function (e) {
          if ((localStorage.getItem('tbf_theme') || 'system') === 'system') {
            e.matches
              ? document.documentElement.classList.add('dark')
              : document.documentElement.classList.remove('dark');
          }
        });
      }

      document.addEventListener('htmx:afterSwap', function (e) {
        if (e.detail.target && e.detail.target.id === 'tbf-modal-content') {
          var m = document.getElementById('tbf-modal');
          if (m) m.classList.remove('hidden');
        }
      });
    });
  </script>

  
</body>
</html>