|
403
|
1 {% import 'components/avatar.html' as avatar with context %} |
|
|
2 |
|
|
3 <div class="modal-card jid-search-dialog"> |
|
|
4 <header class="modal-card-head"> |
|
|
5 <p class="modal-card-title">Start New Chat</p> |
|
|
6 <button class="delete action_close"></button> |
|
|
7 </header> |
|
|
8 <section class="modal-card-body"> |
|
|
9 |
|
|
10 <div class="tabs is-boxed mt-4"> |
|
|
11 <ul> |
|
|
12 <li class="is-active" data-tab="direct"> |
|
|
13 <a> |
|
|
14 <span class="icon has-text-info"> |
|
|
15 <i class="fa-solid fa-user"></i> |
|
|
16 </span> |
|
|
17 <span>Persons</span> |
|
|
18 <span class="tag is-info is-light ml-2 direct-count">0</span> |
|
|
19 </a> |
|
|
20 </li> |
|
|
21 <li data-tab="groups"> |
|
|
22 <a> |
|
|
23 <span class="icon has-text-success"> |
|
|
24 <i class="fa-solid fa-users"></i> |
|
|
25 </span> |
|
|
26 <span>Group Chats</span> |
|
|
27 </a> |
|
|
28 </li> |
|
|
29 </ul> |
|
|
30 </div> |
|
|
31 |
|
|
32 <!-- Direct Messages Tab --> |
|
|
33 <div class="direct-content pt-4"> |
|
|
34 <div class="field"> |
|
|
35 <label class="label">Direct contact search.</label> |
|
|
36 <p class="help">Use names, JIDs, or keywords.</p> |
|
|
37 <div class="control has-icons-left has-icons-right"> |
|
|
38 <input class="input search-input" type="search" |
|
|
39 placeholder="Search contacts…"> |
|
|
40 <span class="icon is-small is-left"> |
|
|
41 <i class="fa-solid fa-magnifying-glass"></i> |
|
|
42 </span> |
|
|
43 <span class="icon is-right action_clear_search"> |
|
|
44 <a role="button" class="delete is-small" aria-label="Clear search"></a> |
|
|
45 </span> |
|
|
46 </div> |
|
|
47 </div> |
|
|
48 <div class="direct-items"> |
|
|
49 </div> |
|
|
50 </div> |
|
|
51 |
|
|
52 <!-- Group Chats Tab --> |
|
|
53 <div class="groups-content is-hidden pt-4"> |
|
|
54 <div class="field"> |
|
|
55 <label class="label">Room search.</label> |
|
|
56 <p class="help">Use names, JIDs, or keywords.</p> |
|
|
57 <div class="control has-icons-left has-icons-right"> |
|
|
58 <input class="input search-input" type="search" |
|
|
59 placeholder="Search rooms…"> |
|
|
60 <span class="icon is-small is-left"> |
|
|
61 <i class="fa-solid fa-magnifying-glass"></i> |
|
|
62 </span> |
|
|
63 <span class="icon is-right action_clear_search"> |
|
|
64 <a role="button" class="delete is-small" aria-label="Clear search"></a> |
|
|
65 </span> |
|
|
66 </div> |
|
|
67 </div> |
|
|
68 <div class="is-flex is-justify-content-space-between mb-4"> |
|
|
69 <button class="button is-success is-light action_new_room"> |
|
|
70 <span class="icon"> |
|
|
71 <i class="fa-solid fa-plus"></i> |
|
|
72 </span> |
|
|
73 <span>Create New Room</span> |
|
|
74 </button> |
|
|
75 </div> |
|
|
76 |
|
|
77 <!-- New Room Form (initially hidden) --> |
|
|
78 <div class="box is-hidden mb-4 panel_new_room"> |
|
|
79 <div class="field"> |
|
|
80 <label class="label">Room Name</label> |
|
|
81 <div class="control has-icons-left"> |
|
|
82 <input class="input input-room-name" type="text" placeholder="Enter room name"> |
|
|
83 <span class="icon is-small is-left"> |
|
|
84 <i class="fa-solid fa-hashtag"></i> |
|
|
85 </span> |
|
|
86 </div> |
|
|
87 </div> |
|
|
88 <div class="field"> |
|
|
89 <label class="label">Room Type</label> |
|
|
90 <div class="control"> |
|
|
91 <div class="select is-fullwidth"> |
|
|
92 <select> |
|
|
93 <option>Public Room</option> |
|
|
94 {# |
|
|
95 FIXME: only public room is supported for now, need to |
|
|
96 check config option to use. |
|
|
97 <option>Private Room</option> |
|
|
98 #} |
|
|
99 </select> |
|
|
100 </div> |
|
|
101 </div> |
|
|
102 </div> |
|
|
103 <div class="field is-grouped"> |
|
|
104 <div class="control"> |
|
|
105 <button class="button is-success is-small action_create_room">Create Room</button> |
|
|
106 </div> |
|
|
107 </div> |
|
|
108 <div class="notification is-danger error-message is-hidden mt-4"> |
|
|
109 <button class="delete action_hide_error_message"></button> |
|
|
110 <p></p> |
|
|
111 </div> |
|
|
112 </div> |
|
|
113 |
|
|
114 <!-- Search Result --> |
|
|
115 <div class="groups-items"></div> |
|
|
116 </div> |
|
|
117 </section> |
|
|
118 <footer class="modal-card-foot is-justify-content-flex-end"> |
|
|
119 <button class="button action_close">Cancel</button> |
|
|
120 <button class="button is-primary ml-2 action_ok" disabled>Start Chat</button> |
|
|
121 </footer> |
|
|
122 </div> |
|
|
123 |
|
|
124 |
|
|
125 |
