1/*
2 * Copyright (C) 2022 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16export const SpHiLogRecordHtml = `
17<style>
18:host{
19    background: var(--dark-background3,#FFFFFF);
20    border-radius: 0 16px 16px 0;
21    display: inline-block;
22    width: 100%;
23    height: 100%;
24}
25.hilog-tracker {
26    font-size:16px;
27    margin-bottom: 30px;
28    padding-top: 30px;
29    padding-left: 54px;
30    margin-right: 30px;
31}
32.hilog-config-div {
33   width: 80%;
34   display: flex;
35   flex-direction: column;
36   margin-top: 5vh;
37   margin-bottom: 5vh;
38   gap: 25px;
39}
40
41.hilog-title {
42  text-align: center;
43  line-height: 40px;
44  font-weight: 700;
45  margin-right: 10px;
46  opacity: 0.9;
47  font-family: Helvetica-Bold;
48  font-size: 18px;
49}
50.hilog-switch {
51  display:inline;
52  float: right;
53  height: 38px;
54  margin-top: 10px;
55}
56.hilog-config-top {
57   display: none;
58   flex-direction: column;
59   margin-top: 5vh;
60   gap: 25px;
61}
62.config-title {
63  line-height: 40px;
64  font-weight: 700;
65  margin-right: 10px;
66  opacity: 0.9;
67  font-family: Helvetica-Bold;
68  font-size: 18px;
69  text-align: center;
70}
71.config-title-des {
72  line-height: 35px;
73  font-weight: 400;
74  opacity: 0.6;
75  font-family: Helvetica;
76  font-size: 14px;
77  text-align: center;
78}
79.config-select{
80  border-radius: 15px;
81  width: 100%;
82}
83</style>
84<div class="hilog-tracker">
85    <div class="hilog-config-div">
86      <div>
87         <span class="hilog-title">Start Hilog Record</span>
88         <lit-switch class="hilog-switch"></lit-switch>
89      </div>
90      <div class="hilog-config-top">
91        <div>
92          <span class="process-title config-title">Process</span>
93          <span class="config-title-des">Record process</span>
94        </div>
95        <lit-select-v default-value="" rounded="" class="record-process-select config-select" 
96        mode="multiple" canInsert="" title="Select Proces" placement="bottom" placeholder="">
97        </lit-select-v>
98      </div>
99      <div class="hilog-config-top">
100        <div>
101          <span class="logs-title config-title">Level</span>
102          <span class="config-title-des">Record logs level</span>
103        </div>
104        <lit-select default-value="" rounded="" class="record-logs-select config-select" canInsert="" 
105        title="Select Log Level" rounded placement = "bottom" placeholder=" ">
106          ${getHiLogLevel()
107            .map(
108              (level): string => `<lit-select-option class="div-button" value="${level}">${level}</lit-select-option>`
109            )
110            .join('')}
111                </lit-select>
112              </div>
113            </div>
114        </div>
115        `;
116
117function getHiLogLevel(): string[] {
118  return ['ALL-Level', 'Debug', 'Info', 'Warn', 'Error', 'Fatal'];
119}
120